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. Sql注入_mysql权限入侵

    实验:测试不同数据库用户的操作权限 文件读写测试:load_file() ,into outfile 数据库用户账号密码存储在mysql.user下 Mysql最高权限用户root: Mysql普通权 ...

  2. 以层的观点思考各个nginx的log位置

    问题 做代理服务器时候,自身的log.被代理的服务器的log 回答 以层的观点思考这个问题 各层的日志落在各层

  3. python系列十：python3函数

    #!/usr/bin/python #-*-coding:gbk-*- '''函数的简单规则:    函数代码块以 def 关键词开头,后接函数标识符名称和圆括号 ().    任何传入参数和自变量必 ...

  4. PAT 1074 宇宙无敌加法器 （20 分）

    地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的,这种神奇的数字称为“PAT数”.每个 PAT 星人都必须熟记各位数字的进制 ...

  5. leetcode第一刷_Rotate Image

    这个题该怎么说呢.旋转又要求inplace.一般就是要找到某种规律了.这个还是非常明显的,画一下原来的.再画一下旋转之后的.看看原来的跑到什么位置了. 牵扯到四个位置按顺时针方向互换一下位置,发现仅仅 ...

  6. 印象笔记ipad端快捷键

  7. Oracle学习笔记—归档模式

    什么是归档模式 Oracle数据库有联机重做日志,这个日志是记录对数据库所做的修改,比如插入,删除,更新数据等,对这些操作都会记录在联机重做日志里.一般数据库至少要有2个联机重做日志组.当一个联机重做 ...

  8. ABAP 创建测试文件

    使用 CG3Y 下载,可以改成下载txt到本地. FORM CREATE_TESTFILE. ), L_OFF LIKE SY-TABIX, L_LEN LIKE SY-TABIX, L_SUM LI ...

  9. 我的第二个Python小程序

    输出0-100之间的偶数: # Author: fansik # Description: Output an even number between 0 and 100 # method one n ...

  10. [转] - 学习ASP.NET比较完整的流程！

    如果你已经有较多的面向对象开发经验,跳过以下这两步:  第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.N ...