HTML5+jquery实现的搜索匹配效果，或者说是搜索过滤，当你在文本框输入一个字符时，如果下边的列表中有以此为开头的内容时，将自动为你显示相关内容。

 

　　示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，希望对你是有帮助的

 

　　HTML

 

　　

 

　　

 

　　<linkrel="stylesheet"type="text/css"href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

 

　　<divclass="g-container">

 

　　<formaction=""class="basic-grey">

 

　　<divclass="form-group">

 

　　<labelfor="lastname"class="control-label">

 

　　公司选择:

 

　　</label>

 

　　<divclass="Companies">

 

　　<inputclass="form-control"type="text"placeholder="请选择"id="js-groupId">

 

　　<inputtype="hidden"id="groupId">

 

　　<ulid="groupid">

 

　　<lidata-id="827"><ahref="javascript:void(0)">厦门集众筹智科技有限公司</a></li>

 

　　<lidata-id="826"><ahref="javascript:void(0)">苏州高新区文体发展有限公司</a></li>

 

　　<lidata-id="825"><ahref="javascript:void(0)">美罗城test</a></li>

 

　　<lidata-id="824"><ahref="javascript:void(0)">深圳市高收益科技开发有限公司</a></li>

 

　　<lidata-id="823"><ahref="javascript:void(0)">深圳市蜗爱生活科技开发有限公司</a></li>

 

　　<lidata-id="815"><ahref="javascript:void(0)">深圳市宇恒乐便利店管理有限公司</a></li>

 

　　<lidata-id="814"><ahref="javascript:void(0)">广东胜佳超市有限公司</a></li>

 

　　<lidata-id="813"><ahref="javascript:void(0)">顺义李先生说</a></li>

 

　　<lidata-id="812"><ahref="javascript:void(0)">十足集团股份有限公司</a></li>

 

　　<lidata-id="811"><ahref="javascript:void(0)">宏图三胞高科技术有限公司</a></li>

 

　　<lidata-id="810"><ahref="javascript:void(0)">九州连锁超市公司</a></li>

 

　　<lidata-id="809"><ahref="javascript:void(0)">李先生</a></li>

 

　　<lidata-id="808"><ahref="javascript:void(0)">李先生牛肉面快餐厅</a></li>

 

　　<lidata-id="807"><ahref="javascript:void(0)">李先生牛肉面快餐厅</a></li>

 

　　<lidata-id="806"><ahref="javascript:void(0)">美宜佳便利店有限公司</a></li>

 

　　<lidata-id="805"><ahref="javascript:void(0)">上海一嗨汽车租赁有限公司</a></li>

 

　　<lidata-id="804"><ahref="javascript:void(0)">龙湖商业地产（重庆区）</a></li>

 

　　<lidata-id="803"><ahref="javascript:void(0)">阜阳华联集团股份有限公司</a></li>

 

　　<lidata-id="802"><ahref="javascript:void(0)">百万庄园</a></li>

 

　　<lidata-id="801"><ahref="javascript:void(0)">百万庄园</a></li>

 

　　<lidata-id="800"><ahref="javascript:void(0)">上海恭胜酒店管理有限公司</a></li>

 

　　<lidata-id="799"><ahref="javascript:void(0)">北京好伦哥餐饮有限公司</a></li>

 

　　<lidata-id="798"><ahref="javascript:void(0)">富驿酒店集团有限公司</a></li>

 

　　</ul>

 

　　</div>

 

　　</div>

 

　　</form>

 

　　</div>

 

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

 

　　});