jQuery如何实现前端搜索功能-js教程-PHP中文网

首页

web前端

js教程

jQuery如何实现前端搜索功能

php中世界最好的语言

Dec 31, 2017 am 11:05 AM

jquery 前端搜索

这次给大家带来的是jQuery如何实现前端搜索功能，前端搜索功能是需要HTML和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(&#39;a:contains(&#39;+ searchText +&#39;)&#39;).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)')获取包含指定字符的元素，该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

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

相信看了以上介绍你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7708

Java教程

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

显示更多

Related knowledge

wps表格找不到正在搜索的数据,请检查搜索选项位置 Mar 19, 2024 pm 10:13 PM

智能为主导的时代，办公软件也普及开来，Wps表格由于它的灵活性被广大的办公人员采用。在工作中要求我们不只是要学会简单的表格制作和文字录入，我们要掌握更多的操作技能，才能完成实际工作中的任务，有数据的报表，运用表格更方便更清楚更准确。今天我们给大家带来的课程是：wps表格找不到正在搜索的数据,为什么请检查搜索选项位置？1、首先选中Excel表格，双击打开。然后在该界面中，选中所有的单元格。　　2、然后在该界面中，点击顶部工具栏里“文件”里的“编辑”选项。　　3、其次在该界面中，点击顶部工具栏里的“

手机淘宝怎么搜索店铺搜索店铺名的方法 Mar 13, 2024 am 11:00 AM

　　手机淘宝app软件内提供的商品好物非常多，随时随地想买就买，而且件件都是正品，每一件商品的价格标签一清二楚，完全没有任何的复杂操作，享受更加便捷的购物乐趣。随心所欲自由搜索选购，不同品类的商品板块都是开放的，添加个人的收货地址以及联系电话，方便快递公司联系到你，实时查看最新的物流动态，那么有些新人用户第一次使用它，不知道如何搜索商品，当然只需要在搜索栏输入关键词就能找到所有的商品结果，自由选购根本停不下来，现在小编在线详细为手机淘宝用户们带来搜索店铺名的方法。　　1.首先打开手机淘宝app,

PHP与Vue：完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue：完美搭档的前端开发利器在当今互联网高速发展的时代，前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高，前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术，搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合，以及详细的代码示例，帮助读者更好地理解和应用这两

前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

在前端开发面试中，常见问题涵盖广泛，包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此，应试者应充分准备这些方面，以展现自己的能力和专业知识。

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

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、接着我们通过其他人分享链接，直接定位和下

Go语言前端技术探秘：前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面

See all articles

jQuery如何实现前端搜索功能

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题