这事还得从产品经理说起......
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插件)