javaScript自动补全-优快云博客

本文介绍了一个互动式网页应用，通过输入提示和颜色选择功能，实现了用户在文本框输入时，实时显示预设颜色名称的提示框，并允许用户选择颜色。应用通过JavaScript实现动态匹配和展示功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动提示文本框首先离不开文本框<input type="text">本身、而提示框则采用<div>块内嵌项目列表<ul>来实现。当前用户在文本框中每输入一个字符(onkeyup事件)时就在预定的"颜色名称集(功能很小很小)"中查找、找到匹配的项就动态加载到<ul>中、显示给用户选择、HTML代码如下：

 
   view plain 
   print 
   ? 
  
 < body >     
     < form   method = "post"   name = "myForm1" >     
         Color:< input   type = "text"   name = "colors"   id = "colors"   onkeyup = "findColors();"   />     
     </ form >     
     < div   id = "popup" >     
         < ul   id = "colors_ul" > </ ul >     
     </ div >     
   </ body >     

考虑到<div>块的位置必须出现在输入框的下面、因此采用css的绝对定位、并设置两个边框属性、一个用于有匹配结果时显示提示框<div>、另一个用于未查到匹配结果时隐藏提示框。相应的页面设置和表单的css样式如下：

 
   view plain 
   print 
   ? 
  
 <style>    
     <!--   
     body{   
         font-family :  Arial , Helvetica , sans-serif ;    
         font-size :  12px ;  padding :  0px ;  margin :  5px ;    
     }   
     form{padding :  0px ;  margin :  0px ;}    
     input{   
         /*用户输入框的样式*/     
         font-family :  Arial , Helvetica , sans-serif ;    
         font-size :  12px ;  border :  1px   solid   #000000 ;    
         width :  200px ;  padding :  1px ;  margin :  0px ;    
     }   
     #popup {    
         /*提示框div块的样式*/     
         position :  absolute ;  width :  202px ;    
         color :  #004a7e ;  font-size :  12px ;    
         font-family :  Arial , Helvetica , sans-serif ;    
         left: 36px ; top:  25px ;    
     }   
     #popup . show {    
         /*显示提示框的边框*/     
         border :  1px   solid   #004a7e ;    
     }   
     #popup . hide {    
         /*隐藏提示框的边框*/     
         border :  none ;       
     }   
         -->   
  </style>   

当用户在文本框中输入任意一个字符时、则在预定好的"颜色名称集"中搜索。如果找到匹配的项则存在一个数组中、并传递给显示提示框的函数setColors()、否则利用函数clearColors()清除提示框、代码如下：

 
   view plain 
   print 
   ? 
  
 var  oInputField;      
         var  oPopDiv;    
         var  oColorsUl;    
         var  aColors = [ "red" , "green" , "blue" , "magenta" , "yellow" , "chocolate" , "black"  +    
         "" , "darkcyan" , "darkgreen" , "darkhaki" , "ivory" , "darkmagenta" , "cornfloewrblue"  +    
         "" , "bcksa" , "cgsa" , "rdgdsa" , "hfdsa" , "rqga" , "bhfdag" , "cadgdsa" ];    
         aColors.sort();  //按字母排序     
         function  initVars(){    
             //初始化变量     
             oInputField = document.forms["myForm1" ].colors;    
             oPopDiv = document.getElementById("popup" );    
             oColorsUl = document.getElementById("colors_ul" );    
         }   
         function  findColors(){    
             initVars();  //初始化变量     
             if (oInputField.value.length > 0){    
                 var  aResult =  new  Array();   //用于存放匹配结果     
                 for ( var  i = 0 ; i < aColors.length ; i++ ){    
                     //必须是从单词的开始处匹配     
                     if (aColors[i].indexOf(oInputField.value) == 0)    
                         aResult.push(aColors[i]); //加入结果     
                 }   
                 if (aResult.length > 0)   //如果有匹配的颜色则显示出来     
                     setColors(aResult);   
                 else                          //否则就清除、用户多输入一个字母     
                     clearColors();  //就有可能从有匹配到无、到无的时候需要清除     
             }   
             else     
                 clearColors(); //无输入时清除提示框     
         }   

所谓的"颜色名称集合"就是一个特定的数组aColors、里面存放了很多预定好的颜色名称、实际运用中这个数组应该是服务器上的动态数据、明天来加上、用Ajax方式把后台数据查询出来、付给这个数组。其实很简单、然而数据库怎么存储、跟查询时sql语句的拼写、就很重要了、不过我基本上一点也不了解这方面的东西！

setColors()和clearColors()分别用来显示和清除提示框、用户每输入一个字符就调用一次findColors()函数、找到匹配项时调用setColors()、否则调用clearColors()。

传递给setColors()的参数是一个数组、里面存放着所有匹配用户输入的数据、因此setColors()的职责就是将这些匹配项一个个放入<li>中、并添加到<ul>里、而clearColors()则直接清除整个提示框即可。代码如下：

 
   view plain 
   print 
   ? 
  
 function  clearColors(){    
             //清除提示内容     
             for ( var  i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )    
                 oColorsUl.removeChild(oColorsUl.childNodes[i]);   
             oPopDiv.className = "hide"  ;    
         }   
            
         function  setColors(the_colors){    
             //显示提示框、传入的参数即为匹配出来的结果组成的数组     
             clearColors();  //没输入一个字母就先清楚原先的提示、再继续     
             oPopDiv.className = "show"  ;    
             var  oLi ;    
             for ( var  i = 0 ; i < the_colors.length ; i++ ){    
                 //将匹配的提示结果逐一显示给用户     
                 oLi = document.createElement("li" );    
                 oColorsUl.appendChild(oLi);   
                 oLi.appendChild(document.createTextNode(the_colors[i]));   
                    
                 oLi.onmouseover = function (){    
                     this .className =  "mouseOver"  ;   //鼠标指针经过时高亮     
                 }   
                 oLi.onmouseout = function (){    
                     this .className =  "mouseOut"  ;    //鼠标指针离开时恢复原样     
                 }   
                 oLi.onclick = function (){    
                     //用户单击某个匹配项时、设置输入框为该项的值     
                     oInputField.value = this .firstChild.nodeValue;    
                     clearColors();  //同时清除提示框     
                 }   
             }   
         }   

在给提示框中的每一项<li>添加鼠标事件、鼠标经过时高亮显示、单击鼠标时则自动将选项赋给输入框、并清空提示框。<ul>的css样式风格如下：

 
   view plain 
   print 
   ? 
  
 <style>    
     <!--           
         /*提示框的样式风格*/     
     ul{   
         list-style :  none ;    
         margin :  0px ;  padding :  0px ;    
     }   
     li.mouseOver{   
         background-color :  #004a7e ;    
         color :  #FFFFFF ;    
     }   
     li.mouseOut{   
         background-color :  #FFFFFF ;    
         color :  #004a7e ;    
     }   
     -->   
 </style>   

图是运行效果、IE8跟火狐都行：

完整代码如下：

 
   view plain 
   print 
   ? 
  
 < %@ page  language = "java"   import = "java.util.*"   pageEncoding = "UTF-8" % >     
 < %    
 String path  =  request .getContextPath();    
 String basePath  =  request .getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
 %>     
    
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     
 < html >     
   < head >     
     < base   href = "<%=basePath%>" >     
        
     < title > 匹配用户输入 </ title >     
        
     < meta   http-equiv = "pragma"   content = "no-cache" >     
     < meta   http-equiv = "cache-control"   content = "no-cache" >     
     < meta   http-equiv = "expires"   content = "0" >         
     < meta   http-equiv = "keywords"   content = "keyword1,keyword2,keyword3" >     
     < meta   http-equiv = "description"   content = "This is my page" >     
     < style >     
     <!--   
     body{   
         font-family: Arial,Helvetica,sans-serif;   
         font-size: 12px; padding: 0px; margin: 5px;   
     }   
     form{padding: 0px; margin: 0px;}   
     input{   
         /*用户输入框的样式*/   
         font-family: Arial,Helvetica,sans-serif;   
         font-size: 12px; border: 1px solid #000000;   
         width: 200px; padding: 1px; margin: 0px;   
     }   
     #popup{   
         /*提示框div块的样式*/   
         position: absolute; width: 202px;   
         color: #004a7e; font-size: 12px;   
         font-family: Arial,Helvetica,sans-serif;   
         left: 36px; top: 25px;   
     }   
     #popup.show{   
         /*显示提示框的边框*/   
         border: 1px solid #004a7e;   
     }   
     #popup.hide{   
         /*隐藏提示框的边框*/   
         border: none;      
     }   
     /*提示框的样式风格*/   
     ul{   
         list-style: none;   
         margin: 0px; padding: 0px;   
     }   
     li.mouseOver{   
         background-color: #004a7e;   
         color: #FFFFFF;   
     }   
     li.mouseOut{   
         background-color: #FFFFFF;   
         color: #004a7e;   
     }   
     -->     
     </ style >     
    
     < script   type = "text/javascript" >     
        
         var oInputField;     
         var oPopDiv;   
         var oColorsUl;   
         var aColors  = ["red","green","blue","magenta","yellow","chocolate","black" +    
         "","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +   
         "","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];   
         aColors.sort();  //按字母排序   
         function initVars(){   
             //初始化变量   
             oInputField  =  document .forms["myForm1"].colors;    
             oPopDiv  =  document .getElementById("popup");    
             oColorsUl  =  document .getElementById("colors_ul");    
         }   
         function findColors(){   
             initVars();  //初始化变量   
             if(oInputField.value.length >  0){    
                 var aResult  =  new  Array();  //用于存放匹配结果    
                 for(var i  =  0  ; i  <   aColors.length  ; i++ ){    
                     //必须是从单词的开始处匹配   
                     if(aColors[i].indexOf(oInputField.value) == 0)   
                         aResult.push(aColors[i]); //加入结果   
                 }   
                 if(aResult.length >  0)  //如果有匹配的颜色则显示出来    
                     setColors(aResult);   
                 else                        //否则就清除、用户多输入一个字母   
                     clearColors();  //就有可能从有匹配到无、到无的时候需要清除   
             }   
             else   
                 clearColors(); //无输入时清除提示框   
         }   
            
            
         function clearColors(){   
             //清除提示内容   
             for(var i  =  oColorsUl .childNodes.length - 1 ; i  > = 0 ; i-- )    
                 oColorsUl.removeChild(oColorsUl.childNodes[i]);   
             oPopDiv.className  =  "hide"  ;    
         }   
            
         function setColors(the_colors){   
             //显示提示框、传入的参数即为匹配出来的结果组成的数组   
             clearColors();  //没输入一个字母就先清楚原先的提示、再继续   
             oPopDiv.className  =  "show"  ;    
             var oLi ;   
             for(var i  =  0  ; i  <   the_colors.length  ; i++ ){    
                 //将匹配的提示结果逐一显示给用户   
                 oLi  =  document .createElement("li");    
                 oColorsUl.appendChild(oLi);   
                 oLi.appendChild(document.createTextNode(the_colors[i]));   
                    
                 oLi.onmouseover  =  function (){    
                     this.className  =  "mouseOver"  ;  //鼠标指针经过时高亮    
                 }   
                 oLi.onmouseout  =  function (){    
                     this.className  =  "mouseOut"  ;   //鼠标指针离开时恢复原样    
                 }   
                 oLi.onclick  =  function (){    
                     //用户单击某个匹配项时、设置输入框为该项的值   
                     oInputField.value  =  this .firstChild.nodeValue;    
                     clearColors();  //同时清除提示框   
                 }   
             }   
         }   
            
     </ script >     
    
   </ head >     
      
   < body >     
     < form   method = "post"   name = "myForm1" >     
         Color:< input   type = "text"   name = "colors"   id = "colors"   onkeyup = "findColors();"   />     
     </ form >     
     < div   id = "popup" >     
         < ul   id = "colors_ul" > </ ul >     
     </ div >     
   </ body >     
 </ html >   
  