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实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解jQuery设置内容和属性
Apr 11 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
分享php多功能图片处理类
2016/05/15 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
在python里从协程返回一个值的示例
2019/02/19 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
百日安全活动总结
2014/05/04 职场文书
2015教师节通讯稿
2015/07/20 职场文书
初中思品教学反思
2016/02/20 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android