html5如何實(shí)現(xiàn)搜索匹配效果

這篇“html5如何實(shí)現(xiàn)搜索匹配效果”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5如何實(shí)現(xiàn)搜索匹配效果”文章吧。

　　HTML5+jquery實(shí)現(xiàn)的搜索匹配效果，或者說是搜索過濾，當(dāng)你在文本框輸入一個(gè)字符時(shí)，如果下邊的列表中有以此為開頭的內(nèi)容時(shí)，將自動為你顯示相關(guān)內(nèi)容。

　　示例中僅列出了一些，用時(shí)候你可以自己再完善下，代碼僅為您提供一種思路，希望對你是有幫助的

　　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)">蘇州高新區(qū)文體發(fā)展有限公司</a></li>

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

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

　　<lidata-id="823"><ahref="javascript:void(0)">深圳市蝸愛生活科技開發(fā)有限公司</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)">十足集團(tuán)股份有限公司</a></li>

　　<lidata-id="811"><ahref="javascript:void(0)">宏圖三胞高科技術(shù)有限公司</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)">龍湖商業(yè)地產(chǎn)（重慶區(qū)）</a></li>

　　<lidata-id="803"><ahref="javascript:void(0)">阜陽華聯(lián)集團(tuán)股份有限公司</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)">富驛酒店集團(tuán)有限公司</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()

　　});

以上就是關(guān)于“html5如何實(shí)現(xiàn)搜索匹配效果”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。