http://www.codefans.net/jscss/code/4830.shtml

<!DOCTYPE html>
<head>
<title>jQuery实现的搜索列表过滤</title>
<style>
body{background: #fff font-size: 13px;}
#wrap{position: relative;}
.product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}
.product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}
.filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}
li{padding: 5px;margin: 3px;list-style: none;width: 230px;border-top: 1px solid #ccc;}
li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px}
ul{margin: 0;padding: 0;}
.clear{clear: both;}
</style>
<script src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function filterList(header, list) {
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
$matches = $(list).find('a:Contains(' + filter + ')').parent();
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
$(this).change();
});
}
$(function () {
filterList($("#form"), $("#list"));
});
}(jQuery));
</script>
</head>
<body>
<noscript><div id="noscript">需要开启浏览器的JavaScript功能才能查看更多效果!</div></noscript>
<div id="container">
<div id="wrap">
<div class="product-head">
<h1>Product Search</h1>
<div id="form"></div>
<div class="clear"></div>
</div>
<ul id="list">
<li><img src="/jscss/demoimg/201401/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li>
<li><img src="/jscss/demoimg/201401/broccoli.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">Broccoli</a></li>
<li><img src="/jscss/demoimg/201401/carrot.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Carrot</a></li>
<li><img src="/jscss/demoimg/201401/celery.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Celery</a></li>
<li><img src="/jscss/demoimg/201401/lettuce.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Lettuce</a></li>
<li><img src="/jscss/demoimg/201401/mushroom.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Mushroom</a></li>
<li><img src="/jscss/demoimg/201401/onion.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Onion</a></li>
</ul>
</div>
</body>
</html>

HTML5 JS实现搜索匹配功能的更多相关文章

  1. 基于Vuejs的搜索匹配功能

    最近一直在看vue,查了很多资料,看了很多文档和博客,大概半知半解了,然后利用所理解的知识写了一个简单的搜索匹配功能. 大概长这个样子:   <!DOCTYPE html> <htm ...

  2. iOS 模糊、精确搜索匹配功能方法总结 By HL

    字符串搜索主要用于UITableView的搜索功能的筛选,过滤,查询 下面是一些流行的搜索查询方法 一.遍历搜索 for循环 根据要求:精确搜索(判读字符串相等)   模糊搜索(字符串包含) 相关知识 ...

  3. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  4. Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  5. Html5+js测试题(开发版)

    ------------------------------------------------ 1. 谈谈你对js闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的 ...

  6. Html5+js测试题【完整版】

    一.闭包的理解:使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露.闭包三个特性: 1.函数嵌套函数 ; 2 ...

  7. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  8. 利用visual studio 搜索替换功能清除项目中javascript文件的debugger;

    在做web项目中,写js代码时候,会有一堆的debugger;,当时又懒得删,后面就多起来了,在vs的编辑器里面,其查找替换功能支持正则和整个项目/解决方案替换,这样就很容易删掉debugger;,方 ...

  9. HTML5 + JS 网站追踪技术：帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier，简称UUID

    1 1 1 HTML5 + JS  网站追踪技术:帆布指纹识别 Canvas FingerPrinting 1 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这 ...

随机推荐

  1. 剖析与优化 Go 的 web 应用

    https://mp.weixin.qq.com/s/HDsbZLOK3h8-XjejvPH2sA https://studygolang.com/articles/12685

  2. css 生效顺序 less 写法

    <!DOCTYPE html><html><style type="text/css">.c{color:red;}.c{color:green ...

  3. Vue中使用定时器setInterval和setTimeout

    js中定时器有两种,一个是循环执行setInterval,另一个是定时执行setTimeout 一.循环执行(setInterval) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会执行一次 ...

  4. hdu 2112 HDU Today(map与dijkstra的结合使用)

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. shutil 模块 高级的文件、文件夹、压缩包 处理模块

    高级的文件.文件夹.压缩包 处理模块 # 将文件内容拷贝到另一个文件中 shutil.copyfileobj(fsrc, fdst[, length]) import shutil shutil.co ...

  6. Spring IOC/DI和AOP原理(转发：https://www.cnblogs.com/techroad4ca/p/5770073.html)

    一 IOC/DI 1. 概念及原理 IOC: Inversion of Control(控制反转)是一种设计思想,就是容器控制应用程序所需要外部资源的创建和管理,然后将其反转给应用程序.对象及其依赖对 ...

  7. Nginx -HTTP和反向代理服务器简单配置

    from:http://blog.sina.com.cn/s/blog_6b64b6a701011feh.html Nginx官方测试能够支持5万并发连接,实际生产环境中可支持2-4万并发连接数. 在 ...

  8. Kattis - register 【水】

    题意 就是 有一堆容器,然后可以执行加的操作,每个容量是 2, 3, 5, 7, 11, 13, 17, 19 然后 有进位 比如第一个 容器,到2了,就会重置为0,然后 下一个容器+ 1, 但是要保 ...

  9. 用js来实现那些数据结构 第二章

    这一篇文章,我们一起来看看数组还有哪些用法,以及在实际工作中我们可以用这些方法来做些什么.由于其中有部分内容并不常用,所以我尽量缩小篇幅.在这篇文章内介绍完大部分的数组方法,加快我们实现其它数据结构的 ...

  10. 【HackerRank】Service Lane

     Calvin is driving his favorite vehicle on the 101 freeway. He notices that the check engine light o ...