一个菜鸟的互联网技术分享博客
您的位置: 主页 > HTML5 JQuery 实现搜索匹配功能
advertisement

HTML5 JQuery 实现搜索匹配功能

代码以演示如下:



  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>HTML5 JS实现搜索匹配功能-jq22.com</title>  
  6. <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>  
  7. <style>  
  8. div,li,ul {  
  9.     margin:0;  
  10.     padding:0;  
  11. }  
  12. ul li {  
  13.     list-style:none;  
  14. }  
  15. .basic-grey {  
  16.     width:600px;  
  17.     margin:510%;  
  18. }  
  19. .basic-grey .Companies {  
  20.     position:relative;  
  21. }  
  22. .basic-grey .Companies ul {  
  23.     position:relative;  
  24.     height:210px;  
  25.     width:100%;  
  26.     overflow-y:auto;  
  27.     border:1px solid #DDD;  
  28.     display:none;  
  29. }  
  30. .basic-grey .Companies ul li {  
  31.     padding:3px 12px;  
  32. }  
  33. .basic-grey .Companies ul li:hover {  
  34.     background-color:#bebebe;  
  35.     cursor:pointer;  
  36. }  
  37. .basic-grey .Companies ul li.top {  
  38.     position:absolute;  
  39.     top:0;  
  40. }  
  41. </style>  
  42. </head>  
  43. <body>  
  44. <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">  
  45. <div class="g-container">   
  46.     <form action="" class="basic-grey">  
  47.         <div class="form-group">  
  48.             <label for="lastname" class="control-label">  
  49.             公司选择:  
  50.         </label>  
  51.             <div class="Companies">  
  52.                 <input class="form-control" type="text" placeholder="请选择" id="js-groupId">  
  53.                 <input type="hidden" id="groupId">  
  54.                 <ul id="groupid">  
  55.                     <li data-id="827"><a href="javascript:void(0)">厦门集众筹智科技有限公司</a></li>  
  56.                     <li data-id="826"><a href="javascript:void(0)">苏州高新区文体发展有限公司</a></li>  
  57.                     <li data-id="825"><a href="javascript:void(0)">美罗城test</a></li>  
  58.                     <li data-id="824"><a href="javascript:void(0)">深圳市高收益科技开发有限公司</a></li>  
  59.                     <li data-id="823"><a href="javascript:void(0)">深圳市蜗爱生活科技开发有限公司</a></li>  
  60.                     <li data-id="815"><a href="javascript:void(0)">深圳市宇恒乐便利店管理有限公司</a></li>  
  61.                     <li data-id="814"><a href="javascript:void(0)">广东胜佳超市有限公司</a></li>  
  62.                     <li data-id="813"><a href="javascript:void(0)">顺义李先生说</a></li>  
  63.                     <li data-id="812"><a href="javascript:void(0)">十足集团股份有限公司</a></li>  
  64.                     <li data-id="811"><a href="javascript:void(0)">宏图三胞高科技术有限公司</a></li>  
  65.                     <li data-id="810"><a href="javascript:void(0)">九州连锁超市公司</a></li>  
  66.                     <li data-id="809"><a href="javascript:void(0)">李先生</a></li>  
  67.                     <li data-id="808"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li>  
  68.                     <li data-id="807"><a href="javascript:void(0)">李先生牛肉面快餐厅</a></li>  
  69.                     <li data-id="806"><a href="javascript:void(0)">美宜佳便利店有限公司</a></li>  
  70.                     <li data-id="805"><a href="javascript:void(0)">上海一嗨汽车租赁有限公司</a></li>  
  71.                     <li data-id="804"><a href="javascript:void(0)">龙湖商业地产(重庆区)</a></li>  
  72.                     <li data-id="803"><a href="javascript:void(0)">阜阳华联集团股份有限公司</a></li>  
  73.                     <li data-id="802"><a href="javascript:void(0)">百万庄园</a></li>  
  74.                     <li data-id="801"><a href="javascript:void(0)">百万庄园</a></li>  
  75.                     <li data-id="800"><a href="javascript:void(0)">上海恭胜酒店管理有限公司</a></li>  
  76.                     <li data-id="799"><a href="javascript:void(0)">北京好伦哥餐饮有限公司</a></li>  
  77.                     <li data-id="798"><a href="javascript:void(0)">富驿酒店集团有限公司</a></li>  
  78.                 </ul>  
  79.             </div>  
  80.         </div>  
  81.     </form>  
  82.   
  83. </div>  
  84.   
  85. <script>  
  86. jQuery.expr[':'].Contains = function(a, i, m) {  
  87.     return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;  
  88. };  
  89.   
  90. function filterList(list) {  
  91.     $('#js-groupId').bind('input propertychange', function() {  
  92.         var filter = $(this).val();  
  93.         if (filter) {  
  94.             $matches = $(list).find('a:Contains(' + filter + ')').parent();  
  95.             $('li', list).not($matches).slideUp();  
  96.             $matches.slideDown();  
  97.         } else {  
  98.             $(list).find("li").slideDown();  
  99.         }  
  100.     });  
  101. }  
  102. $(function() {  
  103.     filterList($("#groupid"));  
  104.     $('#js-groupId').bind('focus', function() {  
  105.         $('#groupid').slideDown();  
  106.     }).bind('blur', function() {  
  107.         $('#groupid').slideUp();  
  108.     })  
  109.     $('#groupid').on('click', 'li', function() {  
  110.         $('#js-groupId').val($(this).text())  
  111.         $('#groupId').val($(this).data('id'))  
  112.         $('#groupid').slideUp()  
  113.     });  
  114. })  
  115. </script>  
  116.   
  117. </body>  
  118. </html>  

参考资料
zhangren.online
上一篇:没有了
下一篇:没有了

您可能喜欢

​解决ajax跨域问题

​解决ajax跨域问题

​js字符串去除前后空格

​js字符串去除前后空格

​js获取一个对象的长度

​js获取一个对象的长度

​基于AOS页面滚动元素动画实例

​基于AOS页面滚动元素动画实例

​ThinkCMF怎么重置密码

​ThinkCMF怎么重置密码

​鼠标点击时出现小心心

​鼠标点击时出现小心心

回到顶部