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

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)">蘇州高新區(qū)文體發(fā)展有限公司</a></li>                    <li data-id="825"><a href="javascript:void(0)">美羅城test</a></li>                    <li data-id="824"><a href="javascript:void(0)">深圳市高收益科技開發(fā)有限公司</a></li>                    <li data-id="823"><a href="javascript:void(0)">深圳市蝸愛生活科技開發(fā)有限公司</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)">十足集團(tuán)股份有限公司</a></li>                    <li data-id="811"><a href="javascript:void(0)">宏圖三胞高科技術(shù)有限公司</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)">龍湖商業(yè)地產(chǎn)（重慶區(qū)）</a></li>                    <li data-id="803"><a href="javascript:void(0)">阜陽華聯(lián)集團(tuán)股份有限公司</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)">富驛酒店集團(tuán)有限公司</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搜索匹配怎么做？的詳細(xì)內(nèi)容，更多請關(guān)注 其它相關(guān)文章！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。