<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>工程轻量化与可靠性技术实验室</title>

</head>

<body>

<div class="content-right">

      <input type="text"><input type="submit" value="搜索">

      <h3>应用流体学</h3>

      <ul id="content_news_list">

        <li><span>--</span><a href="">这里是文章的标题1</a></li>

        <li><span>--</span><a href="">这里是文章的标题2</a></li>

        <li><span>--</span><a href="">这里是文章的标题3</a></li>

        <li><span>--</span><a href="">这里是文章的标题4</a></li>

        <li><span>--</span><a href="">这里是文章的标题5</a></li>

        <li><span>--</span><a href="">这里是文章的标题6</a></li>

        <li><span>--</span><a href="">这里是文章的标题6</a></li>

        <li><span>--</span><a href="">这里是文章的标题6</a></li>

        <li><span>--</span><a href="">这里是文章的标题6</a></li>

        <li><span>--</span><a href="">这里是文章的标题4</a></li>

      </ul>

    </div>

</body>
<script type="text/javascript">

    $(function(){

      $("input[type=text]").change(function () {

        var searchText = $(this).val();//获取输入的搜索内容

        var $searchLi = "";//预备对象，用于存储匹配出的li

        if (searchText != "") {

          //获取所有匹配的li

          $searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();

          //将内容清空

          $("#content_news_list").html("");

        }

        //将获取的元素追加到列表中

        $("#content_news_list").html($searchLi).clone();

        //判断搜索内容是否有效，若无效，输出not find

        if ($searchLi.length <= ) {

          $("#content_news_list").html("<li>not find</li>")

        }

      })

      $("input[type=submit]").click(function () {

        $("searchText").change();

      })

    })

</script>

jQuery实现简单前端搜索功能

jQuery实现简单前端搜索功能的更多相关文章

  1. jquery实现简单的搜索功能

    管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...

  2. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  3. jquery一句话实现快速搜索功能

    jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...

  4. jquery实现简单的搜索

    对一个简单的ul列表进行输入框的搜索功能,搜索之前及搜索后显示效果如下: 用到的主要jquery技术有filter()和match()方法以及正则匹配,基础HTML+div设置: <div cl ...

  5. 利用jquery的contains实现搜索功能

    / jquery实现的搜索功能 $('#search_btn').on('click',function(){ var txt=$('#inputValue').val(); var value=$( ...

  6. html中layui+jfinal模板实现前端搜索功能

    <input type="text" id="campus" class="layui-input" onkeyup="ck ...

  7. jquery实现表格的搜索功能

    版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...

  8. Jquery实现简单到计时功能(setTimeout,setInterval)

    要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...

  9. Javascript之简单按钮搜索功能

    学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...

随机推荐

  1. 解决sublime install package连不上的问题

    下载文件 百度网盘:https://pan.baidu.com/s/1Z-11d4btZJyx5zA7uzNi8Q 修改配置文件 转载请注明博客出处:http://www.cnblogs.com/cj ...

  2. shit Rap & mock api

    shit Rap & mock api https://thx.github.io/RAP/study.html https://github.com/thx/RAP/wiki/quick_g ...

  3. Hadoop RPC protocol description--转

    原文地址:https://spotify.github.io/snakebite/hadoop_rpc.html Snakebite currently implements the followin ...

  4. 【bzoj3295】[Cqoi2011]动态逆序对 树套树 线段树套替罪羊树

    这个东西,关于某个数的逆序对数为在他之前比他大的在他之后比他小的数的数目的和,所以删除之前先把这个减去就好了 人傻自带超大常数,中间由于内存池开小了所以运行错误. #include<cstdio ...

  5. hive 排序和聚集

    1.order by 是对数据进行全排序,属于标准排序语句 order by 会对输入做全局排序,因此只有一个reducer(多个reducer无法保证全局有序)只有一个reducer,会导致当输入规 ...

  6. C#中string[]数组和list<string>泛型的相互转换 【转】

    http://www.cnblogs.com/szjdw/archive/2012/03/09/2387885.html 1,从System.String[]转到List<System.Stri ...

  7. 常州day1p4

    给定一棵 n 个点的树,树上每个节点代表一个小写字母,询问一个字符串 S 是否在树上出现过? 字符串 S 出现过即表示存在两个点 u,v,u 到 v 的最短路径上依次连接所有点上的字母恰好是 S N ...

  8. Round 403 div. 2

    B 可以二分相遇的坐标:也可以二分时间,判断是否存在两个人的区间没有交. An easy way to intersect a number of segments [l1, r1], ..., [l ...

  9. 洛谷 P2056 [ZJOI2007]捉迷藏 解题报告

    P2056 [ZJOI2007]捉迷藏 题目描述 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由\ ...

  10. oracle 远程登录sqlplus TNS：无监听

    1.将localhost 改成 计算机名 best-PC,或者ip地址 .  我修改成计算机名,因为经常在无线网络和有限网络之间切换 SID_LIST_LISTENER =  (SID_LIST =  ...