`
touchinsert
  • 浏览: 1296860 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javaScript自动补全

 
阅读更多

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

view plain print ?
  1. < body >   
  2.     < form   method = "post"   name = "myForm1" >   
  3.         Color:< input   type = "text"   name = "colors"   id = "colors"   onkeyup = "findColors();"   />   
  4.     </ form >   
  5.     < div   id = "popup" >   
  6.         < ul   id = "colors_ul" > </ ul >   
  7.     </ div >   
  8.   </ body >   

        考虑到<div>块的位置必须出现在输入框的下面、因此采用css的绝对定位、并设置两个边框属性、一个用于有匹配结果时显示提示框<div>、另一个用于未查到匹配结果时隐藏提示框。相应的页面设置和表单的css样式如下：
view plain print ?
  1. <style>  
  2.     <!--  
  3.     body{  
  4.         font-family :  Arial , Helvetica , sans-serif ;  
  5.         font-size :  12px ;  padding :  0px ;  margin :  5px ;  
  6.     }  
  7.     form{padding :  0px ;  margin :  0px ;}  
  8.     input{  
  9.         /*用户输入框的样式*/   
  10.         font-family :  Arial , Helvetica , sans-serif ;  
  11.         font-size :  12px ;  border :  1px   solid   #000000 ;  
  12.         width :  200px ;  padding :  1px ;  margin :  0px ;  
  13.     }  
  14.     #popup {  
  15.         /*提示框div块的样式*/   
  16.         position :  absolute ;  width :  202px ;  
  17.         color :  #004a7e ;  font-size :  12px ;  
  18.         font-family :  Arial , Helvetica , sans-serif ;  
  19.         left: 36px ; top:  25px ;  
  20.     }  
  21.     #popup . show {  
  22.         /*显示提示框的边框*/   
  23.         border :  1px   solid   #004a7e ;  
  24.     }  
  25.     #popup . hide {  
  26.         /*隐藏提示框的边框*/   
  27.         border :  none ;     
  28.     }  
  29.         -->  
  30.  </style>  

        当用户在文本框中输入任意一个字符时、则在预定好的"颜色名称集"中搜索。如果找到匹配的项则存在一个数组中、并传递给显示提示框的函数setColors()、否则利用函数clearColors()清除提示框、代码如下：
view plain print ?
  1. var  oInputField;    
  2.         var  oPopDiv;  
  3.         var  oColorsUl;  
  4.         var  aColors = [ "red" , "green" , "blue" , "magenta" , "yellow" , "chocolate" , "black"  +  
  5.         "" , "darkcyan" , "darkgreen" , "darkhaki" , "ivory" , "darkmagenta" , "cornfloewrblue"  +  
  6.         "" , "bcksa" , "cgsa" , "rdgdsa" , "hfdsa" , "rqga" , "bhfdag" , "cadgdsa" ];  
  7.         aColors.sort();  //按字母排序   
  8.         function  initVars(){  
  9.             //初始化变量   
  10.             oInputField = document.forms["myForm1" ].colors;  
  11.             oPopDiv = document.getElementById("popup" );  
  12.             oColorsUl = document.getElementById("colors_ul" );  
  13.         }  
  14.         function  findColors(){  
  15.             initVars();  //初始化变量   
  16.             if (oInputField.value.length > 0){  
  17.                 var  aResult =  new  Array();   //用于存放匹配结果   
  18.                 for ( var  i = 0 ; i < aColors.length ; i++ ){  
  19.                     //必须是从单词的开始处匹配   
  20.                     if (aColors[i].indexOf(oInputField.value) == 0)  
  21.                         aResult.push(aColors[i]); //加入结果   
  22.                 }  
  23.                 if (aResult.length > 0)   //如果有匹配的颜色则显示出来   
  24.                     setColors(aResult);  
  25.                 else                          //否则就清除、用户多输入一个字母   
  26.                     clearColors();  //就有可能从有匹配到无、到无的时候需要清除   
  27.             }  
  28.             else   
  29.                 clearColors(); //无输入时清除提示框   
  30.         }  

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

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

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

view plain print ?
  1. function  clearColors(){  
  2.             //清除提示内容   
  3.             for ( var  i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )  
  4.                 oColorsUl.removeChild(oColorsUl.childNodes[i]);  
  5.             oPopDiv.className = "hide"  ;  
  6.         }  
  7.           
  8.         function  setColors(the_colors){  
  9.             //显示提示框、传入的参数即为匹配出来的结果组成的数组   
  10.             clearColors();  //没输入一个字母就先清楚原先的提示、再继续   
  11.             oPopDiv.className = "show"  ;  
  12.             var  oLi ;  
  13.             for ( var  i = 0 ; i < the_colors.length ; i++ ){  
  14.                 //将匹配的提示结果逐一显示给用户   
  15.                 oLi = document.createElement("li" );  
  16.                 oColorsUl.appendChild(oLi);  
  17.                 oLi.appendChild(document.createTextNode(the_colors[i]));  
  18.                   
  19.                 oLi.onmouseover = function (){  
  20.                     this .className =  "mouseOver"  ;   //鼠标指针经过时高亮   
  21.                 }  
  22.                 oLi.onmouseout = function (){  
  23.                     this .className =  "mouseOut"  ;    //鼠标指针离开时恢复原样   
  24.                 }  
  25.                 oLi.onclick = function (){  
  26.                     //用户单击某个匹配项时、设置输入框为该项的值   
  27.                     oInputField.value = this .firstChild.nodeValue;  
  28.                     clearColors();  //同时清除提示框   
  29.                 }  
  30.             }  
  31.         }  

在给提示框中的每一项<li>添加鼠标事件、鼠标经过时高亮显示、单击鼠标时则自动将选项赋给输入框、并清空提示框。<ul>的css样式风格如下：
view plain print ?
  1. <style>  
  2.     <!--          
  3.         /*提示框的样式风格*/   
  4.     ul{  
  5.         list-style :  none ;  
  6.         margin :  0px ;  padding :  0px ;  
  7.     }  
  8.     li.mouseOver{  
  9.         background-color :  #004a7e ;  
  10.         color :  #FFFFFF ;  
  11.     }  
  12.     li.mouseOut{  
  13.         background-color :  #FFFFFF ;  
  14.         color :  #004a7e ;  
  15.     }  
  16.     -->  
  17. </style>  

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

 

完整代码如下：

view plain print ?
  1. < %@ page  language = "java"   import = "java.util.*"   pageEncoding = "UTF-8" % >   
  2. < %  
  3. String path  =  request .getContextPath();  
  4. String basePath  =  request .getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>   
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  8. < html >   
  9.   < head >   
  10.     < base   href = "<%=basePath%>" >   
  11.       
  12.     < title > 匹配用户输入 </ title >   
  13.       
  14.     < meta   http-equiv = "pragma"   content = "no-cache" >   
  15.     < meta   http-equiv = "cache-control"   content = "no-cache" >   
  16.     < meta   http-equiv = "expires"   content = "0" >       
  17.     < meta   http-equiv = "keywords"   content = "keyword1,keyword2,keyword3" >   
  18.     < meta   http-equiv = "description"   content = "This is my page" >   
  19.     < style >   
  20.     <!--  
  21.     body{  
  22.         font-family: Arial,Helvetica,sans-serif;  
  23.         font-size: 12px; padding: 0px; margin: 5px;  
  24.     }  
  25.     form{padding: 0px; margin: 0px;}  
  26.     input{  
  27.         /*用户输入框的样式*/  
  28.         font-family: Arial,Helvetica,sans-serif;  
  29.         font-size: 12px; border: 1px solid #000000;  
  30.         width: 200px; padding: 1px; margin: 0px;  
  31.     }  
  32.     #popup{  
  33.         /*提示框div块的样式*/  
  34.         position: absolute; width: 202px;  
  35.         color: #004a7e; font-size: 12px;  
  36.         font-family: Arial,Helvetica,sans-serif;  
  37.         left: 36px; top: 25px;  
  38.     }  
  39.     #popup.show{  
  40.         /*显示提示框的边框*/  
  41.         border: 1px solid #004a7e;  
  42.     }  
  43.     #popup.hide{  
  44.         /*隐藏提示框的边框*/  
  45.         border: none;     
  46.     }  
  47.     /*提示框的样式风格*/  
  48.     ul{  
  49.         list-style: none;  
  50.         margin: 0px; padding: 0px;  
  51.     }  
  52.     li.mouseOver{  
  53.         background-color: #004a7e;  
  54.         color: #FFFFFF;  
  55.     }  
  56.     li.mouseOut{  
  57.         background-color: #FFFFFF;  
  58.         color: #004a7e;  
  59.     }  
  60.     -->   
  61.     </ style >   
  62.   
  63.     < script   type = "text/javascript" >   
  64.       
  65.         var oInputField;    
  66.         var oPopDiv;  
  67.         var oColorsUl;  
  68.         var aColors  = ["red","green","blue","magenta","yellow","chocolate","black" +  
  69.         "","darkcyan","darkgreen","darkhaki","ivory","darkmagenta","cornfloewrblue" +  
  70.         "","bcksa","cgsa","rdgdsa","hfdsa","rqga","bhfdag","cadgdsa"];  
  71.         aColors.sort();  //按字母排序  
  72.         function initVars(){  
  73.             //初始化变量  
  74.             oInputField  =  document .forms["myForm1"].colors;  
  75.             oPopDiv  =  document .getElementById("popup");  
  76.             oColorsUl  =  document .getElementById("colors_ul");  
  77.         }  
  78.         function findColors(){  
  79.             initVars();  //初始化变量  
  80.             if(oInputField.value.length >  0){  
  81.                 var aResult  =  new  Array();  //用于存放匹配结果  
  82.                 for(var i  =  0  ; i  <   aColors.length  ; i++ ){  
  83.                     //必须是从单词的开始处匹配  
  84.                     if(aColors[i].indexOf(oInputField.value) == 0)  
  85.                         aResult.push(aColors[i]); //加入结果  
  86.                 }  
  87.                 if(aResult.length >  0)  //如果有匹配的颜色则显示出来  
  88.                     setColors(aResult);  
  89.                 else                        //否则就清除、用户多输入一个字母  
  90.                     clearColors();  //就有可能从有匹配到无、到无的时候需要清除  
  91.             }  
  92.             else  
  93.                 clearColors(); //无输入时清除提示框  
  94.         }  
  95.           
  96.           
  97.         function clearColors(){  
  98.             //清除提示内容  
  99.             for(var i  =  oColorsUl .childNodes.length - 1 ; i  > = 0 ; i-- )  
  100.                 oColorsUl.removeChild(oColorsUl.childNodes[i]);  
  101.             oPopDiv.className  =  "hide"  ;  
  102.         }  
  103.           
  104.         function setColors(the_colors){  
  105.             //显示提示框、传入的参数即为匹配出来的结果组成的数组  
  106.             clearColors();  //没输入一个字母就先清楚原先的提示、再继续  
  107.             oPopDiv.className  =  "show"  ;  
  108.             var oLi ;  
  109.             for(var i  =  0  ; i  <   the_colors.length  ; i++ ){  
  110.                 //将匹配的提示结果逐一显示给用户  
  111.                 oLi  =  document .createElement("li");  
  112.                 oColorsUl.appendChild(oLi);  
  113.                 oLi.appendChild(document.createTextNode(the_colors[i]));  
  114.                   
  115.                 oLi.onmouseover  =  function (){  
  116.                     this.className  =  "mouseOver"  ;  //鼠标指针经过时高亮  
  117.                 }  
  118.                 oLi.onmouseout  =  function (){  
  119.                     this.className  =  "mouseOut"  ;   //鼠标指针离开时恢复原样  
  120.                 }  
  121.                 oLi.onclick  =  function (){  
  122.                     //用户单击某个匹配项时、设置输入框为该项的值  
  123.                     oInputField.value  =  this .firstChild.nodeValue;  
  124.                     clearColors();  //同时清除提示框  
  125.                 }  
  126.             }  
  127.         }  
  128.           
  129.     </ script >   
  130.   
  131.   </ head >   
  132.     
  133.   < body >   
  134.     < form   method = "post"   name = "myForm1" >   
  135.         Color:< input   type = "text"   name = "colors"   id = "colors"   onkeyup = "findColors();"   />   
  136.     </ form >   
  137.     < div   id = "popup" >   
  138.         < ul   id = "colors_ul" > </ ul >   
  139.     </ div >   
  140.   </ body >   
  141. </ html >  

2
顶
2
踩
分享到：
| javaScript——优化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics