<!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. 更新 pip & setuptools

    python -m pip install -U pip setuptools

  2. WebClient的使用

    1.下载网页源码: private void button1_Click(object sender, EventArgs e) { string url = textBox1.Text; strin ...

  3. tarjan强连通分量模板（pascal）

    友好城市 [问题描述]小 w 生活在美丽的 Z 国. Z 国是一个有 n 个城市的大国, 城市之间有 m 条单向公路(连接城市 i. j 的公路只能从 i 连到 j). 城市 i. j 是友好城市当且 ...

  4. php获取字符串的编码格式的方法（函数）

    // 检测字符的编码格式 $encode = mb_detect_encoding($string, array('ASCII','UTF-8','GB2312','GBK','BIG5')); ec ...

  5. 【明哥报错簿】可以访问jsp但是访问不到controller

    此工程wms-web-enterprise启动之后,jsp页面可以访问,但是进不了controller.后来发现wms-consumer无法打包编译,在仓库m2里面发现此consumer.jar包为完 ...

  6. Ajax+Js局部刷新

    通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...

  7. 【JQuery】css操作

    一.前言         接着上一章的内容,继续JQuery的学习 二.内容 css 设置或返回匹配元素的样式属性 $(selector).css(css-property-name) $(selec ...

  8. 使用Unity5.1进行VR开发的配置（最新的未必是最好的！！！）

    随着Unity5.1的发布,之前的Oculus Rift和Gear VR 开发流程发生了巨大的变化,这也算是小白鼠们必须付出的代价了~ 那么Unity5.1和Oculus的整合究竟发生了哪些变化,对开 ...

  9. SCOI2014极水的题解- -

    话说SCOI都考了1个月了,终于拿出决心把题解补完了,但都说了是极水的题解,大家就看着玩吧- - DAY1 T1:目标是找最长不降子序列,先就有一个比较显然的结论,就是假如我们要拔高区间[L, R], ...

  10. Python精要参考(第二版)

    ython 精要参考(第二版) 是Python语言初学者不错的参考学习用书,本系列译自Python Essential Reference, Second Edition 希望本系列可以给python ...