程序師世界是廣大編程愛好者互助、分享、學習的平台，程序師世界有你更精彩！
設為首頁 加入收藏
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> J2EE >> 用js實現輸入提示（自動完成）

用js實現輸入提示（自動完成）

編輯：J2EE

以前也寫過一個jQuery的這種插件 ，但是很多地方根本不用jQuery，這個功能也有很多其它庫支持，但是為了用這個功能而加載很多JS插件，這樣效率明顯下降了很多，而且這個東西平時也很常用，所以一決心自己寫了個相對比較獨立的。

完成有以下功能：

輸入字符會把以輸入字符開頭的提示出來。

支持上下方向鍵選擇提示選項，支持循環

支持綁定一個數組提示，支持AJax傳遞輸入框值請求數據。

支持多個選擇的dom元素一塊綁定數據實現輸入提示。各dom元素也可以單獨綁定自己的數據實現輸入提示，互不影響。

支持中文。

首先是JS的核心部分，其各部分都有較詳細的說明，代碼如下：

vIEw source print ?

  1.   ;( function (window){    
  2.  
  3.   /* 插件開始 */    
  4.  
  5.   var autoComplete= function (o){    
  6.  
  7.        var handler=( function (){    
  8.  
  9.            var handler= function (e,o){ return new handler.prototype.init(e,o); }; /* 為每個選擇的dom都創建一個相對應的對象，這樣選擇多個dom時可以很方便地使用 */    
  10.  
  11.            handler.prototype={    
  12.  
  13.                e: null , o: null , timer: null , show:0, input: null , popup: null ,    
  14.  
  15.                init: function (e,o){ /* 設置初始對象 */    
  16.  
  17.                    this .e=e, this .o=o,    
  18.  
  19.                    this .input= this .e.getElementsByTagName( this .o.input)[0],    
  20.  
  21.                    this .popup= this .e.getElementsByTagName( this .o.popup)[0],    
  22.  
  23.                    this .initEvent(); /* 初始化各種事件 */    
  24.  
  25.               },    
  26.  
  27.               match: function (quickExpr,value,source){ /* 生成提示 */    
  28.  
  29.                   var li = null ;    
  30.  
  31.                   for ( var i in source){    
  32.  
  33.                       if ( value.length>0 && quickExpr.exec(source[i])!= null ){    
  34.  
  35.                           li = document.createElement( 'li' );    
  36.  
  37.                           li.innerHtml = '' +source[i]+ 'a>' ;    
  38.  
  39.                          this .popup.appendChild(li);    
  40.  
  41.                       }    
  42.  
  43.                   }    
  44.  
  45.                   if ( this .popup.getElementsByTagName( 'a' ).length)    
  46.  
  47.                       this .popup.style.display= 'block' ;    
  48.  
  49.                   else    
  50.  
  51.                        this .popup.style.display= 'none' ;    
  52.  
  53.                },    
  54.  
  55.                ajax: function (type,url,quickExpr,search){ /* AJax請求遠程數據 */    
  56.  
  57.                   var xhr = window.ActiveXObject ? new ActiveXObject( "Microsoft.XMLHTTP" ) : new XMLHttpRequest();    
  58.  
  59.                    xhr.open(type,url, true ); /* 同異步在此修改 */    
  60.  
  61.                    xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );    
  62.  
  63.                   var that= this ;    
  64.  
  65.                   xhr.onreadystatechange = function (){    
  66.  
  67.                       if (xhr.readyState==4) {    
  68.  
  69.                            if (xhr.status==200) {    
  70.  
  71.                                var data = eval(xhr.responseText);    
  72.  
  73.                               that.match(quickExpr,search,data); /* 相同於成功的回調函數 */    
  74.  
  75.                            } else {    
  76.  
  77.                                alert( "請求頁面異常!" ); /* 請求失敗 */    
  78.  
  79.                            }    
  80.  
  81.                        }    
  82.  
  83.                    };    
  84.  
  85.                    xhr.send( null );    
  86.  
  87.                },    
  88.  
  89.               fetch: function (AJax,search,quickExpr){    
  90.  
  91.                    var that= this ;    
  92.  
  93.                    this .ajax(ajax.type,AJax.url+search,quickExpr,search);    
  94.  
  95.               },    
  96.  
  97.                initEvent: function (){ /* 各事件的集合 */    
  98.  
  99.                    var that= this ;    
  100.  
  101.                   this .input.onfocus = function (){    
  102.  
  103.                        if ( this .inputValue) this .value = this .inputValue;    
  104.  
  105.                        var value= this .value, quickExpr=RegExp( '^' +value, 'i' ), self= this ;    
  106.  
  107.                        var els = that.popup.getElementsByTagName( 'a' );    
  108.  
  109.                        if (els.length>0) that.popup.style.display = 'block' ;    
  110.  
  111.                        that.timer=setInterval( function (){    
  112.  
  113.                            if (value!=self.value){ /* 判斷輸入內容是否改變，兼容中文 */    
  114.  
  115.                               value=self.value;    
  116.  
  117.                                that.popup.innerHtml= '' ;    
  118.  
  119.                                if (value!= '' ){    
  120.  
  121.                                   quickExpr=RegExp( '^' +value);    
  122.  
  123.                                    if (that.o.source) that.match(quickExpr,value,that.o.source);    
  124.  
  125.                                    else if (that.o.ajax) that.fetch(that.o.AJax,value,quickExpr);    
  126.  
  127.                                }    
  128.  
  129.                            }    
  130.  
  131.                        },200);    
  132.  
  133.                    };    
  134.  
  135.                   this .input.onblur = function (){ /*  輸入框添加事件 */    
  136.  
  137.                        if ( this .value!= this .defaultValue) this .inputValue = this .value;    
  138.  
  139.                        clearInterval(that.timer);    
  140.  
  141.                        var current=-1; /* 記住當前有焦點的選項 */    
  142.  
  143.                        var els = that.popup.getElementsByTagName( 'a' );    
  144.  
  145.                        var len = els.length-1;    
  146.  
  147.                       var aClick = function (){    
  148.  
  149.                           that.input.inputValue = this .firstChild.nodeValue;    
  150.  
  151.                            that.popup.innerHtml= '' ;    
  152.  
  153.                            that.popup.style.display= 'none' ;    
  154.  
  155.                           that.input.focus();    
  156.  
  157.                        };    
  158.  
  159.                        var aFocus = function (){    
  160.  
  161.                            for ( var i=len; i>=0; i--){    
  162.  
  163.                                if ( this .parentNode===that.popup.children[i]){    
  164.  
  165.                                   current = i;    
  166.  
  167.                                    break ;    
  168.  
  169.                                }    
  170.  
  171.                            }    
  172.  
  173.                            //that.input.value = this.firstChild.nodeValue;    
  174.  
  175.                            for ( var k in that.o.elemCSS.focus){    
  176.  
  177.                                this .style[k] = that.o.elemCSS.focus[k];    
  178.  
  179.                            }    
  180.  
  181.                        };    
  182.  
  183.                       var aBlur= function (){    
  184.  
  185.                           for ( var k in that.o.elemCSS.blur)    
  186.  
  187.                               this .style[k] = that.o.elemCSS.blur[k];    
  188.  
  189.                        };    
  190.  
  191.                        var aKeydown = function (event){    
  192.  
  193.                            eventevent = event || window.event; /* 兼容IE */    
  194.  
  195.                            if (current === len && event.keyCode===9){ /* tab鍵時popup隱藏 */    
  196.  
  197.                                that.popup.style.display = 'none' ;    
  198.  
  199.                            } else if (event.keyCode==40){ /* 處理上下方向鍵事件方便選擇提示的選項 */    
  200.  
  201.                                current++;    
  202.  
  203.                                if (current<-1) current=len;    
  204.  
  205.                               if (current>len){    
  206.  
  207.                                    current=-1;    
  208.  
  209.                                   that.input.focus();    
  210.  
  211.                                } else {    
  212.  
  213.                                    that.popup.getElementsByTagName( 'a' )[current].focus();    
  214.  
  215.                                }    
  216.  
  217.                            } else if (event.keyCode==38){    
  218.  
  219.                                current--;    
  220.  
  221.                               if (current==-1){    
  222.  
  223.                                    that.input.focus();    
  224.  
  225.                               } else if (current<-1){    
  226.  
  227.                                    current = len;    
  228.  
  229.                                    that.popup.getElementsByTagName( 'a' )[current].focus();    
  230.  
  231.                                } else {    
  232.  
  233.                                   that.popup.getElementsByTagName( 'a' )[current].focus();    
  234.  
  235.                                }    
  236.  
  237.                            }    
  238.  
  239.                        };    
  240.  
  241.                        for ( var i=0; i<els.length; i++){ /* 為每個選項添加事件 */    
  242.  
  243.                            els[i].onclick = aClick;    
  244.  
  245.                            els[i].onfocus = aFocus;    
  246.  
  247.                            els[i].onblur = aBlur;    
  248.  
  249.                            els[i].onkeydown = aKeydown;    
  250.  
  251.                        }    
  252.  
  253.                    };    
  254.  
  255.                    this .input.onkeydown = function (event){    
  256.  
  257.                       eventevent = event || window.event; /* 兼容IE */    
  258.  
  259.                        var els = that.popup.getElementsByTagName( 'a' );    
  260.  
  261.                        if (event.keyCode==40){    
  262.  
  263.                            if (els[0]) els[0].focus();    
  264.  
  265.                        } else if (event.keyCode==38){    
  266.  
  267.                           if (els[els.length-1]) els[els.length-1].focus();    
  268.  
  269.                        } else if (event.keyCode==9){    
  270.  
  271.                            if (event.shiftKey== true ) that.popup.style.display = 'none' ;    
  272.  
  273.                        }    
  274.  
  275.                    };    
  276.  
  277.                    this .e.onmouSEOver = function (){ that.show=1; };    
  278.  
  279.                    this .e.onmouSEOut = function (){ that.show=0; };    
  280.  
  281.                    addEvent.call(document, 'click' , function (){    
  282.  
  283.                        if (that.show==0){    
  284.  
  285.                            that.popup.style.display= 'none' ;    
  286.  
  287.                        }    
  288.  
  289.                    }); /* 處理提示框dom元素不支持onblur的情況 */    
  290.  
  291.                }    
  292.  
  293.            };    
  294.  
  295.            handlerhandler.prototype.init.prototype=handler.prototype; /* JQuery style，這樣我們在處的時候就不用每個dom元素都用new來創建對象了 */    
  296.  
  297.            return handler; /* 把內部的處理函數傳到外部 */    
  298.  
  299.        })();    
  300.  
  301.        if ( this .length){ /* 處理選擇多個dom元素 */    
  302.  
  303.            for ( var a= this .length-1; a>=0; a--){ /* 調用方法為每個選擇的dom生成一個處理對象，使它們不互相影響 */    
  304.  
  305.                handler( this [a],o);    
  306.  
  307.            }    
  308.  
  309.        } else { /* 處理選擇一個dom元素 */    
  310.  
  311.            handler( this ,o);    
  312.  
  313.       }    
  314.  
  315.        return this ;    
  316.  
  317.   };    
  318.  
  319.   return window.autoComplete = autoComplete; /* 暴露方法給全局對象 */    
  320.  
  321.   /* 插件結束 */    
  322.  
  323.   })(window);    
  324.

其中了一些全局的自定義函數，如addEvent和在例子中將要用到的getElementsByClassName函數如下：

vIEw source print ?

  1. var getElementsByClassName = function (searchClass, node, tag) { /* 兼容各浏覽器的選擇class的方法；(寫法參考了博客園：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.Html  
  2. ，想了解更多請看這個地址) */    
  3.  
  4.       nodenode = node || document, tagtag = tag ? tag.toUpperCase() : "*" ;    
  5.  
  6.        if (document.getElementsByClassName){ /* 支持getElementsByClassName的浏覽器 */    
  7.  
  8.           var temp = node.getElementsByClassName(searchClass);    
  9.  
  10.            if (tag== "*" ){    
  11.  
  12.                return temp;    
  13.  
  14.           } else {    
  15.  
  16.                var ret = new Array();    
  17.  
  18.                for ( var i=0; i<temp.length; i++)    
  19.

 

  1. 上一頁:
  2. 下一頁:
J2EE
JPA --Java EE 5.0 ORM 規范(圖)

     
如何實現一個與數據庫表字段松耦合的j2ee應用

龔永生 ([email protected]) 2002

在Java EE 6中使用JSF 2.0簡化頁面制作(1)

【51CTO精選譯文】過去幾個星期，51CTO對Java

OSGi,Java模塊化框架的另類進化(1)

【51CTO譯文】我們曾不只一次的聽到2010年將是Jav
在JBoss AS7中進行項目部署

AS7的項目部署方式與原有版本相比有了較大變化，本文通過實
Java Bean屬性命名規范問題分析

問題由來：最近在一個Java bean類中定義了一個boo
相關文章
閱讀排行榜
hibernate annoation (三 id生成器) Enterprise JavaBeans導論一 寫bean類的准則 Zero Turnaround發布2011年Java EE生產力報告 EJB 3.1五大模式改進令Java EE 6更好用(2) 通過JSF 2實現可重用的Ajax化組件(5) JSP中基於Session的在線用戶統計分析 BeanShell在人工測試與管理之中的應用 Java EE 6，貌似民主下的虛偽公平 Spring整合DWR comet 實現無刷新 多人聊天室(1) jBPM4的架構
熱門圖文
php作線形圖的函數 OpenCV HOGDescriptor 參數圖解 上傳-調用WEBservice 程序錯誤顯示，目標機積極拒絕鏈接 c++ 泛型 之 TypeTraints 網絡通信，網絡通訊 Web程序工作原理，web工作原理 為什麼Java中繼承是有害的二 PHP運行模式的深入理解
欄目導航
JAVA編程入門知識關於JAVAJ2EEJ2SEJ2MEJAVA綜合教程
Copyright © 程式師世界 All Rights Reserved