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. <2013 12 28> AOI PCB设计

    主要设计指标: “3.多块拼板最大尺寸:60*50(CM)4. 检测速度:(230-250)片/小时 5.检测通过率:98%6.最窄线宽:设两种精度 A.最窄线宽:0.2mm, 识别精度 0.1mm  ...

  2. 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序

    在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...

  3. jquery mobile 带参数跳转收集（紧个人使用，测试完会补全）

    //临时存储 var TempCache = { cache:function(value){ localStorage.setItem("EasyWayTempCache",va ...

  4. 剑指offer 面试62题

    面试62题: 题目:圆圈中最后剩下的数字 题:0,1,...,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字. 解题思路:约瑟夫环问题,可 ...

  5. gearman相关笔记

    gearman do: task: job只会在一个work上执行. 上面来自一个很好的ppt:http://www.docin.com/p-590223908.html 利用开源的Gearman框架 ...

  6. 标准c时间与日期函数

    标准c时间与日期函数 asctime 语法:     #include <time.h>   char *asctime( const struct tm *ptr ); 功能: 函数将p ...

  7. 标准C语言的输入输出流（i/o）方法详解

    cppreference.com -> 标准 C I/O ->详细说明 标准 C I/O clearerr 语法: #include <stdio.h> void cleare ...

  8. Java进阶学习：将文件上传到七牛云中

    Java进阶学习:将文件上传到七牛云中 通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...

  9. storage

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用. sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时 ...

  10. vscode使用vue中的v-for提示错误

    "vetur.validation.template": false 在设置里面把vetur.validation.template改为false 文件→首选项→设置 搜索vetu ...