jQuery 实现input搜索框自动匹配------Sestid

ゝ一世哀愁。 2024-04-18 12:30 11阅读 0赞

**效果动态图：**

![在这里插入图片描述][20190406220637574.gif]

**源代码：**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 JS实现搜索匹配功能-jq22.com</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.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="请选择" 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>
    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>

[20190406220637574.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/de09919d0e2d4c868036e0e2f35d7b6e.gif