html5搜索匹配怎么做？

概述html5搜索匹配怎么做？

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

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

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搜索匹配怎么做？全部内容，希望文章能够帮你解决html5搜索匹配怎么做？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。