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. websocket Session 不支持序列化

    这是我本来的打算,把socket session 进行序列化分布式存储! 呵呵   然而现实很残酷,这b东西不支持序列化! 解决办法:

  2. QBuffer简单操作（被看做一个标准的可随机访问的文件，支持信号）

    Qt中通过QBuffer类我们可以使用io的方式访问.操作QByteArray中的内容.此时,QByteArray被看做一个标准的可随机访问的文件.例如: QBuffer buffer; char c ...

  3. NOIP2010~2017部分真题总结

    NOIP2010~2017部分真题总结 2010 (吐槽)md这个时候的联赛还只有4题吗? 引水入城 只要发现对于有合法解的地图,每个蓄水厂贡献一段区间这个结论就很好做了 那么\(O(n^3)\)对每 ...

  4. hexo+yilia页脚添加总访问量

    个人博客:https://www.yuehan.online 现在博客:http://www.wangyurui.top 脚本方法使用不蒜子计数 安装脚本 要使用不蒜子(官网:http://busua ...

  5. 升级到tomcat8遇到The method getDispatcherType() is undefined for the type HttpServletRequest

    今天升级到tomcat8,发现原来的项目不能运行了,遇到下面的错误:The method getDispatcherType() is undefined for the type HttpServl ...

  6. Polar 投影c#版本移植

    from:http://hi.baidu.com/sungaoyong/item/0c4584d25873f131e3108f05 ///刘泽军java版本的极坐标投影c#版本的移植 using Sy ...

  7. $Android设置TextView的字体

    做项目的时候,需要使用到手写字体来让内容更加的美观.可是程序中默认使用的是系统的默认字体,怎么将TextView(或EditText)的字体设置成自己想要的字体呢?步骤如下: 1.下载字体文件(.tt ...

  8. Linux软件包管理 RMP包管理

    概述 RPM 包的命名一般都会遵守统一的命名规则,例如: httpd-2.2.15-15.el6.centos.1.i686.rpm 其中的各项代表的含义如下: httpd:软件包名. 2.2.15: ...

  9. 80211N、80211AC建链速率值（对应MCS）

    转:http://www.docin.com/p-1713976102.html?docfrom=rrela 注:各种技术对速率提升的贡献各项技术对提高传输速率的贡献如下:子载波数目增加: 802.1 ...

  10. PHP的异常处理、错误的抛出及错误回调函数

    一.错误.异常和等级常量表 error:不能再编译期发现运行期的错误,不如试图echo输出一个未赋值的变量,这类问题往往导致程序或逻辑无法继续下去而需要中断. exception:程序执行过程中出现意 ...