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方法使用详解
Aug 16 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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错误机制知识汇总
2016/03/24 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
关于js datetime的那点事
2011/11/15 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
求职推荐信
2013/10/28 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
教师对学生的寄语
2014/04/03 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
师范毕业生求职信
2014/07/11 职场文书
2014年村委会工作总结
2014/11/24 职场文书
中秋节随笔
2015/08/15 职场文书