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获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
php 获取当前访问的url文件名的方法小结
2010/02/08 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php中smarty区域循环的方法
2015/06/11 PHP
基于jquery的cookie的用法
2011/01/10 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python批量生成本地ip地址的方法
2015/03/23 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python中模块的__all__属性详解
2017/10/26 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
中学生英语演讲稿
2014/04/26 职场文书
2015新年寄语大全
2014/12/08 职场文书