首页 > 代码库 > JS实现自动提示框匹配查询

JS实现自动提示框匹配查询

2024-09-15 04:59:39   217人阅读

本文介绍一下仿百度搜索框，当对输入框键入文字时，自动弹出建议选项并匹配。

效果如下：

技术分享

 

OK，首先，建个输入框哈

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5      <title>自动搜索</title>
 6 </head>
 7 <body>
 8     自动搜索框 <input type="text" id="input" onkeyup="find()">
 9     <div style="position:absolute;" id="popup">
10         <table id="table" border="0" cellspacing="0" cellpadding="0">        
11             <tbody id="table_body"></tbody>
12         </table>
13     </div>
14 </body>
15 </html>

 

当输入框有输入动作时即调用find函数。find函数主要是搜索对应的相关建议项，此处用的最简单的方法：包含输入内容的数据项即为符合的建议项。

具体实现如下：

 1 function find() {
 2 
 3     inputField = document.getElementById("input");
 4 
 5     for (var i = 0; i < data.length; i++) {
 6           if ((data[i]).indexOf(inputField.value)>=0){
 7                arr.push(data[i]);
 8           }
 9      }
10  
11     set(arr);
12 }

 

现在来到set 函数，其主要功能是将符合的建议项逐条放置于弹出框中。具体实现如下：

 1 function set(arr) {            
 2 
 3     var size = arr.length;
 4     setOffsets();
 5 
 6     var row, cell, txtNode;
 7     for (var i = 0; i < size; i++) {
 8         var nextNode = arr[i];
 9         row = document.createElement("tr");
10         cell = document.createElement("td");
11         
12         cell.onmouseout = function() {this.className=‘mouseOver‘;};
13         cell.onmouseover = function() {this.className=‘mouseOut‘;};//鼠标悬停或离开选项时颜色变化
14         cell.setAttribute("bgcolor", "#FFFAFA");
15         cell.setAttribute("border", "0");
16         cell.onclick = function() { populate(this); } ;  //鼠标点击选项给输入框赋值                           
17 
18         txtNode = document.createTextNode(nextNode);
19         cell.appendChild(txtNode);
20         row.appendChild(cell);
21         TableBody.appendChild(row);
22     }
23 }


此处又引用了两个函数。setOffsets主要是设置弹出框的位置。populate 是当鼠标点击选项时将值赋给输入框。

setOffsets 实现如下：

 1 function setOffsets() {
 2     var end = inputField.offsetWidth;
 3     var left = calculateOffsetLeft(inputField);
 4     var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
 5 
 6     completeDiv.style.border = "black 1px solid";
 7     completeDiv.style.left = left + "px";
 8     completeDiv.style.top = top + "px";
 9     Table.style.width = end + "px";
10 }
11 
12 function calculateOffsetLeft(field) {
13   return calculateOffset(field, "offsetLeft");
14 }
15 
16 function calculateOffsetTop(field) {
17   return calculateOffset(field, "offsetTop");
18 }
19 
20 function calculateOffset(field, attr) {
21   var offset = 0;
22   while(field) {
23     offset += field[attr]; 
24     field = field.offsetParent;
25   }
26   return offset;
27 }

populate 实现如下：

1 function populate(cell) {//点击为文本框赋值
2     inputField.value =http://www.mamicode.com/ cell.firstChild.nodeValue;
3     clearNames();
4 }


为文本框赋值后需消除弹出框中的建议，于是调用clear 函数。具体实现如下：

1 function clear() {    
2     if(TableBody){
3          var ind = TableBody.childNodes.length;
4          for (var i = ind - 1; i >= 0 ; i--) {
5              TableBody.removeChild(TableBody.childNodes[i]);
6          }
7          completeDiv.style.border = "none";
8     }
9 }

 

Ok，到这里JS功能实现就完成了。下面设定一下鼠标滑过建议项时的颜色变化：

1 .mouseOut {
2     background: #708090;
3     color: #FFFAFA;
4     }
5 
6 .mouseOver {
7     background: #FFFAFA;
8     color: #000000;
9 }


另：如需中文搜索，在find 函数中加入正则表达式判断即可。

 

本文完。

欢迎大家交流指正！

 

JS实现自动提示框匹配查询


联系
我们