精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
html5如何实现搜索匹配效果
这篇“html5如何实现搜索匹配效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“html5如何实现搜索匹配效果”文章吧。
创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达十余年累计超上千家客户的网站建设总结了一套系统有效的全网推广解决方案，现已广泛运用于各行各业的客户，其中包括：成都隧道混凝土搅拌车等企业，备受客户好评。
HTML5+jquery实现的搜索匹配效果，或者说是搜索过滤，当你在文本框输入一个字符时，如果下边的列表中有以此为开头的内容时，将自动为你显示相关内容。
示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，希望对你是有帮助的
HTML
公司选择:
厦门集众筹智科技有限公司
苏州高新区文体发展有限公司
美罗城test
深圳市高收益科技开发有限公司
深圳市蜗爱生活科技开发有限公司
深圳市宇恒乐便利店管理有限公司
广东胜佳超市有限公司
顺义李先生说
十足集团股份有限公司
宏图三胞高科技术有限公司
九州连锁超市公司
李先生
李先生牛肉面快餐厅
李先生牛肉面快餐厅
美宜佳便利店有限公司
上海一嗨汽车租赁有限公司
龙湖商业地产（重庆区）
阜阳华联集团股份有限公司
百万庄园
百万庄园
上海恭胜酒店管理有限公司
北京好伦哥餐饮有限公司
富驿酒店集团有限公司
CSS：
div,li,ul{
margin:0;
padding:0;
}
ulli{
list-style:none;
}
.basic-grey{
width:600px;
margin:5%10%;
}
.basic-grey.Companies{
position:relative;
}
.basic-grey.Companiesul{
position:relative;
height:210px;
width:100%;
overflow-y:auto;
border:1pxsolid#DDD;
display:none;
}
.basic-grey.Companiesulli{
padding:3px12px;
}
.basic-grey.Companiesulli:hover{
background-color:#bebebe;
cursor:pointer;
}
.basic-grey.Companiesulli.top{
position:absolute;
top:0;
}
js：
jQuery.expr[':'].Contains=function(a,i,m){
return(a.textContent||a.innerText||"").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
functionfilterList(list){
$('#js-groupId').bind('inputpropertychange',function(){
varfilter=$(this).val();
if(filter){
$matches=$(list).find('a:Contains('+filter+')').parent();
$('li',list).not($matches).slideUp();
$matches.slideDown();
}else{
$(list).find("li").slideDown();
}
});
}
$(function(){
filterList($("#groupid"));
$('#js-groupId').bind('focus',function(){
$('#groupid').slideDown();
}).bind('blur',function(){
$('#groupid').slideUp();
})
$('#groupid').on('click','li',function(){
$('#js-groupId').val($(this).text())
$('#groupId').val($(this).data('id'))
$('#groupid').slideUp()
});
以上就是关于“html5如何实现搜索匹配效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。
当前名称：html5如何实现搜索匹配效果
本文网址：http://cdkjz.cn/article/ghesdd.html
