学到了吗（html5中的canvas元素用于）html5中哪个属性用于规定输入字段，HTML5中如何实现JS搜索匹配功能，HTML5中如何实现JS搜索匹配功能，
HTML5中如何实现JS搜索匹配功能。废话不多说直接上代码。
<!doctype html><html><head><metacharset="utf-8"><title>HTML5中如何实现JS搜索匹配功能</title><scriptsrc="js/jquery.3.5.1.min.js"></script><style>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:3px12px;}.basic-grey.Companies ul li:hover{background-color:#bebebe;cursor:pointer;}.basic-grey.Companies ul li.top{position:absolute;top:0;}</style></head><body><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="请选择"autocomplete="off"id="js-groupId"><inputtype="hidden"id="groupId"><ulid="groupid"><lidata-id="827"><ahref="javascript:void(0)">河南seowww.henenseo.com</a></li><lidata-id="826"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="825"><ahref="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li><lidata-id="824"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="823"><ahref="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li><lidata-id="815"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="814"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="813"><ahref="javascript:void(0)">河南seowww.henenseo.com</a></li><lidata-id="812"><ahref="javascript:void(0)">河南seowww.henenseo.com</a></li><lidata-id="811"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="810"><ahref="javascript:void(0)">新起点博客www.henenseo.com</a></li><lidata-id="809"><ahref="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li><lidata-id="808"><ahref="javascript:void(0)">SEO教程资讯网www.henenseo.com厅</a></li><lidata-id="807"><ahref="javascript:void(0)">河南seowww.henenseo.com</a></li></ul></div></div></form></div><scripttype="text/javascript">
jQuery.expr[:].Contains=function(a,i,m){return(a.textContent || a.innerText ||"").toUpperCase().indexOf(m[3].toUpperCase())>=0;};functionfilterList(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()});})</script></body></html>
(window.slotbydup = window.slotbydup || []).push({
id: "u6835052",
container: "_96bek913mdb",
async: true
});
本文链接：http://blog.sauo.top/?id=452 感谢分享!
