HTML5 JS实现搜索匹配功能

HTML5+jquery实现的搜索匹配效果,或者说是搜索过滤,当你在文本框输入一个字符时,如果下边的列表中有以此为开头的内容时,将自动为你显示相关内容,示例中仅列出了一些,用时候你可以自己再完善下,代码仅为您提供一种思路,我想对你是有帮助的

<!DOCTYPE html>
  <html>
  <head lang="en">
    <meta charset="UTF-8">
    <meta name="author" content="dony">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,minimal-ui">
    <title>dony</title>
    <link rel="stylesheet" href="http://api.snaillove.com/cloudmusic/static/css/bootstrap.min.css">
    <style type="text/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;}
    </style>
  </head>
<body>
<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>
 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <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>

欢迎分享本文,转载请保留出处:前端ABC » HTML5 JS实现搜索匹配功能

赞 (2)
分享到:更多 ()

发表评论 0