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搜索匹配怎么做？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！