您的位置：首页 > 既是前端 > 自动完成实现

自动完成实现

1 comments 2011-8-11 16:50:41 views

 最近这段时间啥也不想写，也不想做什么，今闲来无事就分享一篇源码好了，无意间发现的一篇源码，我也不知道它是从哪里来的。这里测试的时候使用的是数组，实际使用的时候，我们换成Ajax从服务器端获取的方式就OK了。点击这里可以查看本地DEMO。

 
  1. <!doctype html>
  2. <html>
  3. <style>
  4. body {
  5.     margin-left: 0px;
  6.     margin-top: 0px;
  7.     margin-right: 0px;
  8.     margin-bottom: 0px;
  9. }
  10. .auto_hidden {
  11.     width:204px;border-top: 1px solid #333;
  12.     border-bottom: 1px solid #333;
  13.     border-left: 1px solid #333;
  14.     border-right: 1px solid #333;
  15.     position:absolute;
  16.     display:none;
  17. }
  18. .auto_show {
  19.     width:204px;
  20.     border-top: 1px solid #333;
  21.     border-bottom: 1px solid #333;
  22.     border-left: 1px solid #333;
  23.     border-right: 1px solid #333;
  24.     position:absolute;
  25.     z-index:9999; /* 设置对象的层叠顺序 */
  26.     display:block;
  27. }
  28. .auto_onmouseover{
  29.     color:#ffffff;
  30.     background-color:highlight;
  31.     width:100%;
  32. }
  33. .auto_onmouseout{
  34.     color:#000000;
  35.     width:100%;
  36.     background-color:#ffffff;
  37. }
  38. </style>
  39. <script language="javascript">
  40. <!--
  41. var $ = function (id) {
  42.     return "string" == typeof id ? document.getElementById(id) : id;
  43. }
  44. var Bind = function(object, fun) {
  45.     return function() {
  46.         return fun.apply(object, arguments);
  47.     }
  48. }
  49. function AutoComplete(obj,autoObj,arr){
  50.     this.obj=$(obj);        //输入框
  51.     this.autoObj=$(autoObj);//DIV的根节点
  52.     this.value_arr=arr;        //不要包含重复值
  53.     this.index=-1;          //当前选中的DIV的索引
  54.     this.search_value="";   //保存当前搜索的字符
  55. }
  56. AutoComplete.prototype={
  57.     //初始化DIV的位置
  58.     init: function(){
  59.         this.autoObj.style.left = this.obj.offsetLeft + "px";
  60.         this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";
  61.         this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px   
  62.     },
  63.     //删除自动完成需要的所有DIV
  64.     deleteDIV: function(){
  65.         while(this.autoObj.hasChildNodes()){
  66.             this.autoObj.removeChild(this.autoObj.firstChild);
  67.         }
  68.         this.autoObj.className="auto_hidden";
  69.     },
  70.     //设置值
  71.     setValue: function(_this){
  72.         return function(){
  73.             _this.obj.value=this.seq;
  74.             _this.autoObj.className="auto_hidden";
  75.         }       
  76.     },
  77.     //模拟鼠标移动至DIV时，DIV高亮
  78.     autoOnmouseover: function(_this,_div_index){
  79.         return function(){
  80.             _this.index=_div_index;
  81.             var length = _this.autoObj.children.length;
  82.             for(var j=0;j<length;j++){
  83.                 if(j!=_this.index ){       
  84.                     _this.autoObj.childNodes[j].className='auto_onmouseout';
  85.                 }else{
  86.                     _this.autoObj.childNodes[j].className='auto_onmouseover';
  87.                 }
  88.             }
  89.         }
  90.     },
  91.     //更改classname
  92.     changeClassname: function(length){
  93.         for(var i=0;i<length;i++){
  94.             if(i!=this.index ){       
  95.                 this.autoObj.childNodes[i].className='auto_onmouseout';
  96.             }else{
  97.                 this.autoObj.childNodes[i].className='auto_onmouseover';
  98.                 this.obj.value=this.autoObj.childNodes[i].seq;
  99.             }
  100.         }
  101.     }
  102.     ,
  103.     //响应键盘
  104.     pressKey: function(event){
  105.         var length = this.autoObj.children.length;
  106.         //光标键"↓"
  107.         if(event.keyCode==40){
  108.             ++this.index;
  109.             if(this.index>length){
  110.                 this.index=0;
  111.             }else if(this.index==length){
  112.                 this.obj.value=this.search_value;
  113.             }
  114.             this.changeClassname(length);
  115.         }
  116.         //光标键"↑"
  117.         else if(event.keyCode==38){
  118.             this.index--;
  119.             if(this.index<-1){
  120.                 this.index=length - 1;
  121.             }else if(this.index==-1){
  122.                 this.obj.value=this.search_value;
  123.             }
  124.             this.changeClassname(length);
  125.         }
  126.         //回车键
  127.         else if(event.keyCode==13){
  128.             this.autoObj.className="auto_hidden";
  129.             this.index=-1;
  130.         }else{
  131.             this.index=-1;
  132.         }
  133.     },
  134.     //程序入口
  135.     start: function(event){
  136.         if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
  137.             this.init();
  138.             this.deleteDIV();
  139.             this.search_value=this.obj.value;
  140.             var valueArr=this.value_arr;
  141.             valueArr.sort();
  142.             if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
  143.             try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
  144.             catch (e){ return; }
  145.             var div_index=0;//记录创建的DIV的索引
  146.             for(var i=0;i<valueArr.length;i++){
  147.                 if(reg.test(valueArr[i])){
  148.                     var div = document.createElement("div");
  149.                     div.className="auto_onmouseout";
  150.                     div.seq=valueArr[i];
  151.                     div.onclick=this.setValue(this);
  152.                     div.onmouseover=this.autoOnmouseover(this,div_index);
  153.                     div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
  154.                     this.autoObj.appendChild(div);
  155.                     this.autoObj.className="auto_show";
  156.                     div_index++;
  157.                 }
  158.             }
  159.         }
  160.         this.pressKey(event);
  161.         window.onresize=Bind(this,function(){this.init();});
  162.     }
  163. }
  164. //-->
  165. </SCRIPT>
  166. <body>
  167. <h1 align="center">自动完成函数(Autocomplete Function)</h1>
  168.     <div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
  169.     <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
  170. <script>
  171.     var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
  172. </SCRIPT>
  173. </body>
  174. </html>

 

head

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/automatically_to_achieve.html

 
既是前端 季氏安安 自动完成  体验  AJAX  服务器  JavaScript  
转播到腾讯微博
IE7 下 IFRAME 滚动条无法滚动瀑布流布局浅析

相关文章

1 条留言

我要留言
  • 1 F

    房产抵押贷款  |  2011-8-24 15:09:52  

    这篇文章写的真的很不错已经被www.zhetong.cc所转载。

    [Reply]

(必填)
(必填，支持Gravatar)