<!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. rem和em学习笔记及CSS预处理

    1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如   parent-div中的em-div的font-size为2rem,他的基准就是html的 ...

  2. Java知识点整理（三）

    如何设计出高可用的分布式架构 分布式架构 CDN简介 分布式缓存和本地缓存区别 高并发场景常用技术解决方案 JVM优化示例 Docker和JVM区别 Java开发人员需要注意的五大Docker误区 D ...

  3. 【Python】Python的time和datetime模块

    time 常用的有time.time()和time.sleep()函数. import time print(time.time()) 1499305554.3239055 上面的浮点数称为UNIX纪 ...

  4. 【bzoj4007】[JLOI2015]战争调度 暴力+树形背包dp

    题目描述 给你一棵 $n$ 层的完全二叉树,每个节点可以染黑白两种颜色.对于每个叶子节点及其某个祖先节点,如果它们均为黑色则有一个贡献值,如果均为白色则有另一个贡献值.要求黑色的叶子节点数目不超过 $ ...

  5. 【bzoj4372】烁烁的游戏 动态点分治+线段树

    题目描述 给一颗n个节点的树,边权均为1,初始点权均为0,m次操作:Q x:询问x的点权.M x d w:将树上与节点x距离不超过d的节点的点权均加上w. 输入 第一行两个正整数:n,m接下来的n-1 ...

  6. http://www.pythonchallenge.com/ 网站题解

    在知乎中无意发现了这个网站,做了几题发现挺有趣的,这里记录下自己的解题思路,顺便对比下答案中的思路 网页:http://www.pythonchallenge.com/ 目前只做了几题,解题的方法就是 ...

  7. 【刷题】BZOJ 5248 [2018多省省队联测]一双木棋

    Description 菲菲和牛牛在一块n行m列的棋盘上下棋,菲菲执黑棋先手,牛牛执白棋后手.棋局开始时,棋盘上没有任何棋子, 两人轮流在格子上落子,直到填满棋盘时结束.落子的规则是:一个格子可以落子 ...

  8. Mybatis笔记一：java.lang.NoClassDefFoundError: org/apache/ibatis/mapping/DatabaseIdProvider

    异常错误:org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sqlSess ...

  9. NOIP2003 传染病控制 【搜索 + 卡时】

    题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染病,难以准确判别病毒携带 ...

  10. 使用adb录制手机屏幕视频

    adb shell screenrecord命令可以用来录制Android手机视频 screenrecord是一个shell命令,支持Android4.4(API level 19)以上,支持视频格式 ...