JQuery实现模糊查询关键字高亮输入框

这事还得从产品经理说起......

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>模糊查询关键字高亮输入框</title>
  6     </head>
  7     <style>
  8         * {        
  9         margin:0;
 10         padding:0;
 11         font-size: 16px;
 12         }
 13         ul li {
 14             list-style:none;
 15         }
 16     
 17         input {
 18             border: none;
 19             outline: medium;
 20             background-color: transparent;
 21             /* 去掉背景 */
 22         }
 23     
 24         .left{
 25             float: left;
 26         }
 27     
 28         .right{
 29             float: right;
 30         }
 31     
 32         .none{
 33             display: none;
 34         }
 35     
 36         .box_select{
 37             width: 500px;
 38             margin: 50px auto;
 39         }
 40     
 41         #searchInput{
 42             padding:0 10px;
 43             width: 200px;
 44             height: 40px;
 45             line-height: 10px;
 46             border: 1px solid #E6E6E6;
 47         }
 48     
 49         #content{
 50             max-height: 200px;
 51             line-height: 40px;
 52             border: 1px solid #E6E6E6;
 53             border-top: none;
 54             position: absolute;
 55         }
 56     
 57         #content li{
 58             padding:0 10px;
 59             width: 200px;
 60             line-height: 40px;
 61         }
 62     
 63         #content li:hover{
 64             background-color: #EFF0F5; 
 65         }
 66     
 67         .highlight {
 68             font-weight: bold;
 69             color: #1DB1CF;
 70         }
 71     </style>
 72     <body>
 73         <div class="box_select">
 74             <div class="box1_select left">
 75                 <input id="searchInput" type="text" placeholder="请输入123试试" class="searchInput">
 76                 <ul id="content">
 77 
 78                 </ul>
 79             </div>
 80             <div class="box2_data right">
 81                 <h3>这个相当于数据库(设置属性display:none;隐藏掉)</h3>
 82                 <ul id="data_select" class="data_select">
 83                     <li>1</li>
 84                     <li>2</li>
 85                     <li>3</li>
 86                     <li>123</li>
 87                     <li>网页设计</li>
 88                     <li>UI设计和WEB前端开发员</li>
 89                     <li>web前端开发工程师</li>
 90                     <li>设计</li>
 91                     <li>Javascript</li>
 92                     <li>Html/Html5/Xml</li>
 93                     <li>Css/Css3</li>
 94                     <li>Bootstrap</li>
 95                     <li>angularJS</li>
 96                     <li>java开发工程师</li>
 97                     <li>HTML5页面开发</li>
 98                     <li>ios开发</li>
 99                 </ul>
100             </div>
101         </div>
102 
103         <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
104         <script type="text/javascript" charset="utf-8">
105             function highlight(s, id) {
106                 if (s.length == 0) {
107                     var obj = document.getElementById(id);
108                     var t = obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi, "$1");
109                     obj.innerHTML = t;
110                     return false;
111                 }
112                 s = encode(s);
113                 var obj = document.getElementById(id);
114                 var t = obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi, "$1");
115                 obj.innerHTML = t;
116                 var cnt = loopSearch(s, obj);
117                 t = obj.innerHTML
118                 var r = /{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
119                 t = t.replace(r, "<span class='highlight'>$1</span>");
120                 obj.innerHTML = t;
121 
122                 function encode(s) {
123                     return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/([\\\.\*\[\]\(\)\$\^])/g, "\\$1");
124                 }
125 
126                 function decode(s) {
127                     return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g, "$1").replace(/>/g, ">").replace(/</g, "<").replace(/&/g, "&");
128                 }
129 
130                 function loopSearch(s, obj) {
131                     var cnt = 0;
132                     if (obj.nodeType == 3) {
133                         cnt = replace(s, obj);
134                         return cnt;
135                     }
136                     for (var i = 0, c; c = obj.childNodes[i]; i++) {
137                         if (!c.className || c.className != "highlight") {
138                             cnt += loopSearch(s, c);
139                         }
140 
141                     }
142                     return cnt;
143                 }
144 
145                 function replace(s, dest) {
146                     var r = new RegExp(s, "g");
147                     var tm = null;
148                     var t = dest.nodeValue;
149                     var cnt = 0;
150                     if (tm = t.match(r)) {
151                         cnt = tm.length;
152                         t = t.replace(r, "{searchHL}" + decode(s) + "{/searchHL}")
153                         dest.nodeValue = t;
154                     }
155                     return cnt;
156                 }
157             }
158         </script>
159         <script>
160             $(function() {
161                 var arr = [];
162                 $('#data_select').children().each(function() {
163                     var liText = $(this).text();
164                     arr.push(liText);
165                 });
166 
167                 $('#searchInput').on('keyup', function() {
168                     $('#content').find("li").remove();
169                     $('#content').show();
170                     var searchInput = $('#searchInput').val();
171                     for (var i = 0; i < arr.length; i++) {
172                         if ((arr[i].indexOf(searchInput)) != -1) {
173                             $('#content').append($('<li onclick="removeUl(this)">' + arr[i] + '</li>'));
174                         }
175                     };
176                     var s = $(this).val();
177                     var regu = /^[ ]+$/;
178                     if (!regu.test(s)) {
179                         highlight(s, "content");
180                     };
181 
182                 });
183 
184                 $('#content').on('click', 'li', function() {
185                     $('#searchInput').val($(this).text());
186                 });
187 
188                 removeUl = function() {
189                     $('#content').hide();
190                 };
191 
192                 $(document).keyup(function(event) {
193                     var txt_value = $("#searchInput").val(); //获取地址文本框的值
194                     if (txt_value == "") {
195                         $('#content').hide();
196                     }
197                 });
198 
199             });
200         </script>
201     </body>
202 </html>

好吧,就这样啦....(jq22上找的hLight.js插件)

posted @ 2020-03-18 11:22  杵臼  阅读(470)  评论(0)  编辑  收藏  举报