用jQuery实现在前端搜索
这次给大家带来用jQuery实现在前端搜索，用jQuery实现在前端搜索的注意事项有哪些，下面就是实战案例，一起来看一下。
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <p 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> </p> </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()时无法将内容写入列表中。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是用jQuery实现在前端搜索的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
wps表格找不到正在搜索的数据,请检查搜索选项位置
Mar 19, 2024 pm 10:13 PM
智能为主导的时代，办公软件也普及开来，Wps表格由于它的灵活性被广大的办公人员采用。在工作中要求我们不只是要学会简单的表格制作和文字录入，我们要掌握更多的操作技能，才能完成实际工作中的任务，有数据的报表，运用表格更方便更清楚更准确。今天我们给大家带来的课程是：wps表格找不到正在搜索的数据,为什么请检查搜索选项位置？1、首先选中Excel表格，双击打开。然后在该界面中，选中所有的单元格。 2、然后在该界面中，点击顶部工具栏里“文件”里的“编辑”选项。 3、其次在该界面中，点击顶部工具栏里的“
手机淘宝怎么搜索店铺 搜索店铺名的方法
Mar 13, 2024 am 11:00 AM
手机淘宝app软件内提供的商品好物非常多，随时随地想买就买，而且件件都是正品，每一件商品的价格标签一清二楚，完全没有任何的复杂操作，享受更加便捷的购物乐趣。随心所欲自由搜索选购，不同品类的商品板块都是开放的，添加个人的收货地址以及联系电话，方便快递公司联系到你，实时查看最新的物流动态，那么有些新人用户第一次使用它，不知道如何搜索商品，当然只需要在搜索栏输入关键词就能找到所有的商品结果，自由选购根本停不下来，现在小编在线详细为手机淘宝用户们带来搜索店铺名的方法。 1.首先打开手机淘宝app,
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
Excel搜索快捷键是什么
Mar 20, 2024 am 10:52 AM
想知道Excel搜索快捷键是什么吗？答案很简单，只需要用到【Ctrl+F】就能进行快速搜索了。我们经常用Excel来记录很多不同的数据和名称，如果需要更改的时候，因为数据太多，我们在寻找的时候会很不方便，这样查找起来会相当麻烦。其实，我们完全可以用一下快速搜索的快捷方式来找到我们需要更改的数据！那么，Excel的搜索快捷键是什么呢？今天就来教大家excel表格里面的快捷查找按键，给你们的工作省心省力。这里我用的是本MicrosoftOfficeexcel2010版本来进行演示的，有需要的同学可以
阿里云盘怎么搜索别人的资源
Mar 30, 2024 am 10:31 AM
阿里云盘，这款备受欢迎的存储工具，不仅可以帮助我们高效管理个人资源，还提供了诸多便利功能。那么许多用户在搜索云盘资源的时候，可能会搜不到，所以想要搜索全盘的所有资源，那么在下文中就由本站小编来为大家详细解答这一问题，分享具体的搜索方法，想要了解的用户们就快来跟着本文一起操作了解吧！阿里云盘搜怎么索别人的资源1、首先在阿里云盘的文件夹目录中搜索资源文件的具体路径即可找到对应的文件夹了。2、然后使用文件搜索功能，输入想要查找的关键字即可找到相关的文件内容。3、接着我们通过其他人分享链接，直接定位和下
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
了解jQuery中eq的作用及应用场景
Feb 28, 2024 pm 01:15 PM
jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s
