这事还得从产品经理说起......
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插件)
来源：https://www.cnblogs.com/antao/p/12516254.html