<!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. vue-cli3使用 DllPlugin 实现预编译，提升构建速度

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又 ...

  2. webgl学习笔记三-平移旋转缩放

    写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...

  3. 【经典数据结构】Trie

    在计算机科学中,trie,又称前缀树或字典树,是一种有种树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的所有子孙都有相同的前 ...

  4. P3469 [POI2008]BLO-Blockade

    题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每两个城镇之间至多只有一条直接连接的道路.人们可以从任意一 ...

  5. elasticsearch 第五篇(文档操作接口)

    INDEX API 示例: 1 2 3 4 5 PUT /test/user/1 { "name": "silence", "age": 2 ...

  6. Zabbix3.4.5部署安装（二）

    一.部署环境 一)系统环境: [root@Node3 ~]# cat /etc/redhat-release //查看系统版本 CentOS Linux release (Core) [root@No ...

  7. Linux内核分析2

    周子轩原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 本次实验是通过分析一个简单 ...

  8. oAuth2.0理解

    转自http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 理解OAuth 2.0 作者: 阮一峰 日期: 2014年5月12日 OAuth是一个关 ...

  9. [CTSC2016]时空旅行

    description 题面 solution 线段树分治+斜率优化毒瘤题 题目可以简化为: 你要维护一个包含元素\((x,c)\)的集合 修改操作为从以前的一个版本更新,修改内容为添加或删除一个元素 ...

  10. Python3 字典 pop() 方法

     Python3 字典 描述 Python 字典 pop() 方法删除字典给定键 key 所对应的值,返回值为被删除的值.key值必须给出. 否则,返回default值. 语法 pop()方法语法: ...