<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS實現搜索匹配功能</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>