jQuery实现的简单前端搜索功能示例


Posted in jQuery onOctober 28, 2017

本文实例讲述了jQuery实现的简单前端搜索功能。分享给大家供大家参考,具体如下:

html代码:

<!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>2015-7-8</span><a href="">这里是文章的标题1</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题2</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题3</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题5</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li>
   </ul>
  </div>
</body>

jQuery代码:

<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 <= 0) {
     $("#content_news_list").html("<li>not find</li>")
    }
   })
   $("input[type=submit]").click(function () {
    $("searchText").change();
   })
  })
</script>

通过关键字检索列表中的元素,并将其添加到ul中。

其中$(':contains(text)')获取包含指定字符的元素,该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。

此方法中就是通过判断所获取的元素知否包含所搜索的字符,来实现简单的检索功能。

但是却存在兼容问题,无法兼容IE,在获取元素parent()时无法将内容写入列表中。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
详解jQuery中的easyui
Sep 02 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 #jQuery
jquery ajax异步提交表单数据的方法
Oct 27 #jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 #jQuery
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php模板中出现空行解决方法
2011/03/08 PHP
10个实用的PHP代码片段
2011/09/02 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
js DOM模型操作
2009/12/28 Javascript
清空上传控件input file的值
2010/07/03 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Vuex简单入门
2017/04/19 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python多继承顺序实例分析
2018/05/26 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python 整数越界问题详解
2019/06/27 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
技术总监的工作职责
2013/11/13 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
旷工检讨书1000字
2015/01/01 职场文书
运动会1000米加油稿
2015/07/21 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
图文详解nginx日志切割的实现
2022/01/18 Servers