<!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. 【BZOJ3437】小P的牧场（动态规划，斜率优化）

    [BZOJ3437]小P的牧场(动态规划,斜率优化) 题面 BZOJ 题解 考虑暴力\(dp\),设\(f[i]\)表示强制在\(i\)处建立控制站的并控制\([1..i]\)的最小代价. 很显然,枚 ...

  2. 洛谷P4559 [JSOI2018]列队 【70分二分 + 主席树】

    题目链接 洛谷P4559 题解 只会做\(70\)分的\(O(nlog^2n)\) 如果本来就在区间内的人是不用动的,区间右边的人往区间最右的那些空位跑,区间左边的人往区间最左的那些空位跑 找到这些空 ...

  3. linux下shell显示-bash-3.2$ 不显示路径解决方法

       linux操作下脚本不小心误删了很多东西,变成了下面的样子 在linux shell中不显示路径了,用起来很不方便. 如何改为显示路径的shell呢 步骤如下: vi ~/.bash_profi ...

  4. NOIP2017 Day1 T3 逛公园（最短路+拓扑排序+DP）

    神tm比赛时多清个零就有60了T T 首先跑出1起点和n起点的最短路,因为k只有50,所以可以DP.设f[i][j]表示比最短路多走i的长度,到j的方案数. 我们发现如果在最短路上的和零边会有后向性, ...

  5. Notes of fwt

    昨天考试由于不会fwt而爆炸,所以今天搞了一下fwt……话说这玩意的普及程度已经很高了.fwt,快速沃尔什变换,可以用于位运算卷积的优化,是一种线性变换,所以就会有许多好的性质(eg:可以直接模,可以 ...

  6. python基础----模块、包

    一 模块                                                                                                 ...

  7. 关于使用EmguCV出现 “无法加载 DLL“cvextern”: 找不到指定的程序” 的解决方法

    http://blog.csdn.net/cdjcong/article/details/8444191 查找了网上的一些说法,都是说没有设置好路径,或者未将DLL文件复制到Debug文件夹下,但是我 ...

  8. C++并发编程 thread

    std::thread C++11在标准库中为多线程提供组件, 使用线程需要包含头文件 thread, 其命名空间为 std. 启动新线程 每个进程至少有一个线程: 执行main()函数的线程, 其余 ...

  9. linux python3获取ip地址

    一.不带参数 #!/usr/bin/python # -*- coding: UTF-8 -*- import os def get_ip(): #注意外围使用双引号而非单引号,并且假设默认是第一个网 ...

  10. centos7 samba匿名访问设置

    [global] workgroup = WORKGROUP server string = Samba Server %v netbios name = centos security = user ...