示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，希望对你是有帮助的
html
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"><div class="g-container"> <form action="" class="basic-grey"> <div class="form-group"> <label for="lastname" class="control-label"> 公司选择: </label> <div class="companies"> <input class="form-control" type="text" placeholder="请选择" id="js-groupid"> <input type="hidden" id="groupid"> <ul id="groupid"> <li data-id="827"><a href="javascript:void(0)">厦门集众筹智科技有限公司</a></li> <li data-id="826"><a href="javascript:void(0)">苏州高新区文体发展有限公司</a></li> <li data-id="825"><a href="javascript:void(0)">美罗城test</a></li> <li data-id="824"><a href="javascript:void(0)">深圳市高收益科技开发有限公司</a></li> <li data-id="823"><a href="javascript:void(0)">深圳市蜗爱生活科技开发有限公司</a></li> <li data-id="815"><a href="javascript:void(0)">深圳市宇恒乐便利店管理有限公司</a></li> <li data-id="814"><a href="javascript:void(0)">广东胜佳超市有限公司</a></li> <li data-id="813"><a href="javascript:void(0)">顺义李先生说</a></li> <li data-id="812"><a href="javascript:void(0)">十足集团股份有限公司</a></li> <li data-id="811"><a href="javascript:void(0)">宏图三胞高科技术有限公司</a></li> <li data-id="810"><a href="javascript:void(0)">九州连锁超市公司</a></li> <li data-id="809"><a href="javascript:void(0)">李先生</a></li> <li data-id="808"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li> <li data-id="807"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li> <li data-id="806"><a href="javascript:void(0)">美宜佳便利店有限公司</a></li> <li data-id="805"><a href="javascript:void(0)">上海一嗨汽车租赁有限公司</a></li> <li data-id="804"><a href="javascript:void(0)">龙湖商业地产（重庆区）</a></li> <li data-id="803"><a href="javascript:void(0)">阜阳华联集团股份有限公司</a></li> <li data-id="802"><a href="javascript:void(0)">百万庄园</a></li> <li data-id="801"><a href="javascript:void(0)">百万庄园</a></li> <li data-id="800"><a href="javascript:void(0)">上海恭胜酒店管理有限公司</a></li> <li data-id="799"><a href="javascript:void(0)">北京好伦哥餐饮有限公司</a></li> <li data-id="798"><a href="javascript:void(0)">富驿酒店集团有限公司</a></li> </ul> </div> </div> </form></div>
css：
div,li,ul { margin:0; padding:0;}ul li { list-style:none;}.basic-grey { width:600px; margin:5% 10%;}.basic-grey .companies { position:relative;}.basic-grey .companies ul { position:relative; height:210px; width:100%; overflow-y:auto; border:1px solid #ddd; display:none;}.basic-grey .companies ul li { padding:3px 12px;}.basic-grey .companies ul li:hover { background-color:#bebebe; cursor:pointer;}.basic-grey .companies ul li.top { position:absolute; top:0;}
js：
jquery.expr[':'].contains = function(a, i, m) { return (a.textcontent || a.innertext || "").touppercase().indexof(m[3].touppercase()) >= 0;};function filterlist(list) { $('#js-groupid').bind('input propertychange', 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(); } });}$(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搜索匹配怎么做？的详细内容。