关键词：
对一个简单的ul列表进行输入框的搜索功能，搜索之前及搜索后显示效果如下：
用到的主要jquery技术有filter()和match()方法以及正则匹配，基础HTML+div设置：
<div class="nav_Element_Item "> <h2>数据名称:</h2> <div class="data_search_div"> <input class="data_search_input" type="text" placeholder="请输入数据名称查找"></div> <ul class="nav_Element_List"> <li>基金简称</li> <li>董事会成员</li> <li>数据名称</li> <li>估错处理原则</li> <li>基金分类</li> <li>审计财产</li></ul> </div>
jquery实现：
$(document).on({
"keyup":function(e){
var searchKey = $.trim($(this).val());
if(searchKey=="")return $(".nav_Element_List li").show();
if(searchKey){
var searchReg = new RegExp(searchKey,'gi');
$('.nav_Element_List li').show().filter(function(){
return $(this).text().match(searchReg) == null;
//非只有text时，可加class名进行筛选 如：$(this).find('.order_content').text().match(searchReg) == null;
}).hide();
} else{
$('.nav_Element_List li').show();
}
}
},".data_search_input");
一个简单的案例，希望对大家有帮助。
搜索自动提示的简单模拟jquery
使用jQuery实现类似于百度搜索时的自动完成功能，界面效果所示。首先在输入框上注册keyup事件，然后在事件中通过AJAX获取JSON对象。取得数据后，每一项数据创建一个li标签，在标签上注册click事件，这样当我们点击每一项的时... 查看详情
jquery实现简单搜索$("p:contains()")
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><title>contains</title><scriptsrc="./js/jquery.min.js"></script></head><body><in 查看详情
一个模拟搜索自己主动补全的实例(超简单)
非常早就像写一个模拟Google搜索栏自己主动补全的实例。那时候刚学点js，css也玩不转。即使网上有些demo，看起来也非常费力。写了两次仅仅是勉强能出来待筛选项。不能自由选择。这两天学了点jQuery的aja... 查看详情
快捷搜索框（uisearchbar）简单实现swift
1.在故事板里面拖入一个搜索栏和一个的tableView。2.创建的ViewController，实现代理：UISearchBarDelegate，UITableViewDataSource，的UITableViewDelegate。代码实现如下：//的tableview代理方法扩展的ViewController：UITableViewDataSource，{的UITableViewDelegat 查看详情
android动态搜索的简单实现(代码片段)
系列文章目录Android动态搜索的简单实现文章最后有源码文章目录系列文章目录前言一、addTextChangedListener二、本文案例1.介绍一下SearchView的一些方法2.准备数据3.初始化以及填充数据4.在SearchView中用户输入字符时激发方法里写入简... 查看详情
如何使用 php 和 mySQL 实现简单的站点搜索？
】如何使用php和mySQL实现简单的站点搜索？【英文标题】：HowwouldIimplementasimplesitesearchwithphpandmySQL?【发布时间】：2010-09-2801:34:29【问题描述】：我正在创建一个允许用户提交报价的网站。我将如何创建一个（相对简单？）返回最... 查看详情
利用jquery的contains实现搜索功能(代码片段)
1/jquery实现的搜索功能2$(‘#search_btn‘).on(‘click‘,function()3vartxt=$(‘#inputValue‘).val();4varvalue=$(‘.layui-colla-content‘);5if($.trim(txt)!="")6$(".layui-colla-content").css(‘display‘,‘none‘).filter(" 查看详情
jquery实现表格的搜索功能
作者原创，转载请注明出处！HTML代码如下：<inputtype="text"id="txt"value=""/><inputtype="button"id="btn"value="搜索"/><tableborder="1"cellspacing="0"cellpadding="0"><thead><tr><th>姓名< 查看详情
如何使用 jQuery 数据表插件实现这种复杂的搜索？
】如何使用jQuery数据表插件实现这种复杂的搜索？【英文标题】：HowtoachievethiscomplexsearchusingjQuerydatatableplugin?【发布时间】：2017-05-1517:03:51【问题描述】：我正在尝试制作一个可搜索的界面，我的后端包含三个MySQL数据库表：tbl_c... 查看详情
pythonpython中二进制搜索树的简单实现(代码片段)
前端html中jquery实现对文本的搜索并把搜索相关内容显示出来
做项目的时候有这么一个需求，客户信息显示出来后我要搜索查找相关的客户，并把相关的客户信息全部显示出来，因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div。先看看实现的效果：&nb... 查看详情
用cmd命令实现一个简单的网页搜索(代码片段)
两年前搞的，今天无意找到了原理其实就是跳转到了百度的搜索页。代码如下:@echoofftitle搜索color03mode80,20echo《——————————————————————————————————————》set/pa=请输入你要搜... 查看详情
原生js取代一些jquery方法的简单实现
原生JS取代一些JQuery方法的简单实现下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 1.选取元素//jQueryvarels=$(‘.el‘);//Nat... 查看详情
使用二叉搜索树实现一个简单的map
...法新解》有了点收获，闲来无事，便写了一个二叉搜索树实现的Map类。java的Map接口有很多不想要的方法，自己定义了一个1publicinterfaceIMap<K,V>{2Vget(Kk);34voidput(Kk,Vv);56Vremove(Kk);7}具体实现： 1publicclassBSTree<K,V>implementsI 查看详情
js:ajax的get方法实现简单的搜索框提示
效果演示：一，使用nodejs搭建后台环境，通过ajax的get方法将文本框中的值，实时传输到后台进行比较，后台返回相应的结果，将结果返回到ul中1，创建路由app4.js/***Createdbydybon2018/1/2.*/varexpress=require(‘express‘);varfs=require(‘fs‘);v... 查看详情
11.jquery工具方法$.callbacks()的简单实现(代码片段)
jQuery工具方法$.Callbacks()的简单实现:(function()//创建一个jQuery构造函数functionjQuery(selector)returnnewjQuery.prototype.init(selector);//为jQuery的原型添加init属性，所有实例可以使用该属性jQuery.prototype.init=function(selector)thi 查看详情
jquery实现table模糊搜索(代码片段)
背景 某天，突然被朋友call到说，帮忙用html实现table模糊搜索，前端mock数据自行实现，不用后端交互。其项目用的是jsp，继而不能采用目前前端流行的三大框架的特性，那这相当于“摸底”的小考验了... 查看详情
简单搜索--paddlemobile的技术实现和业务落地
...了百度移动端预测的实践经验，提供多平台支持，在工程实现支持及底层算法模型压缩的基础上，通过CPU、mallGPU等硬件加速，作用于DuerOS、百度APP、百度网盘APP等移动端场景。目前，PaddleMobile在PaddlePaddle0.14版本下已支持CPU、Mali... 查看详情