html5搜索匹配怎么做？

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

HTML

 
    
        

            
            公司选择:
        
            

                
                
                

                    
厦门集众筹智科技有限公司
                    
苏州高新区文体发展有限公司
                    
美罗城test
                    
深圳市高收益科技开发有限公司
                    
深圳市蜗爱生活科技开发有限公司
                    
深圳市宇恒乐便利店管理有限公司
                    
广东胜佳超市有限公司
                    
顺义李先生说
                    
十足集团股份有限公司
                    
宏图三胞高科技术有限公司
                    
九州连锁超市公司
                    
李先生
                    
李先生牛肉面快餐厅
                    
李先生牛肉面快餐厅
                    
美宜佳便利店有限公司
                    
上海一嗨汽车租赁有限公司
                    
龙湖商业地产（重庆区）
                    
阜阳华联集团股份有限公司
                    
百万庄园
                    
百万庄园
                    
上海恭胜酒店管理有限公司
                    
北京好伦哥餐饮有限公司
                    
富驿酒店集团有限公司
                
            
        
    

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[&＃39;:&＃39;].COntains= function(a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function filterList(list) {
    $(&＃39;#js-groupId&＃39;).bind(&＃39;input propertychange&＃39;, function() {
        var filter = $(this).val();
        if (filter) {
            $matches = $(list).find(&＃39;a:Contains(&＃39; + filter + &＃39;)&＃39;).parent();
            $(&＃39;li&＃39;, list).not($matches).slideUp();
            $matches.slideDown();
        } else {
            $(list).find("li").slideDown();
        }
    });
}
$(function() {
    filterList($("#groupid"));
    $(&＃39;#js-groupId&＃39;).bind(&＃39;focus&＃39;, function() {
        $(&＃39;#groupid&＃39;).slideDown();
    }).bind(&＃39;blur&＃39;, function() {
        $(&＃39;#groupid&＃39;).slideUp();
    })
    $(&＃39;#groupid&＃39;).on(&＃39;click&＃39;, &＃39;li&＃39;, function() {
        $(&＃39;#js-groupId&＃39;).val($(this).text())
        $(&＃39;#groupId&＃39;).val($(this).data(&＃39;id&＃39;))
        $(&＃39;#groupid&＃39;).slideUp()
    });
})

以上就是html5搜索匹配怎么做？的详细内容，更多请关注 第一PHP社区 其它相关文章！