欢迎光临
我们一直在努力

HTML5中如何实现JS搜索匹配功能

HTML5中如何实现JS搜索匹配功能。废话不多说直接上代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5中如何实现JS搜索匹配功能</title>
<script src="js/jquery.3.5.1.min.js"></script>
<style>
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;
}
</style>
</head>
<body>
<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="请选择" autocomplete="off" id="js-groupId">
                <input type="hidden" id="groupId">
                <ul id="groupid">
                    <li data-id="827"><a href="javascript:void(0)">河南seowww.henenseo.com</a></li>
                    <li data-id="826"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="825"><a href="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li>
                    <li data-id="824"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="823"><a href="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li>
                    <li data-id="815"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="814"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="813"><a href="javascript:void(0)">河南seowww.henenseo.com</a></li>
                    <li data-id="812"><a href="javascript:void(0)">河南seowww.henenseo.com</a></li>
                    <li data-id="811"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="810"><a href="javascript:void(0)">新起点博客www.henenseo.com</a></li>
                    <li data-id="809"><a href="javascript:void(0)">SEO教程资讯网www.henenseo.com</a></li>
                    <li data-id="808"><a href="javascript:void(0)">SEO教程资讯网www.henenseo.com厅</a></li>
                    <li data-id="807"><a href="javascript:void(0)">河南seowww.henenseo.com</a></li>
                </ul>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">
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()
 });
 })
 </script>
</body>
</html>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » HTML5中如何实现JS搜索匹配功能

评论 抢沙发

评论前必须登录!