html搜索匹配,HTML5 JS实现搜索匹配功能

jQuery实现的搜索列表过滤

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;}

(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 = $("

").attr({"class":"filterform","action":"#"}),

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));

需要开启浏览器的JavaScript功能才能查看更多效果!

Product Search

• Apple
• Broccoli
• Carrot
• Celery
• Lettuce
• Mushroom
• Onion