自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用js實現(xiàn)輸入提示（自動完成）

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

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

完成有以下功能：

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

支持上下方向鍵選擇提示選項，支持循環(huán)

支持綁定一個數(shù)組提示，支持ajax傳遞輸入框值請求數(shù)據(jù)。

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

支持中文。

首先是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都創(chuàng)建一個相對應(yīng)的對象，這樣選擇多個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){ /* 設(shè)置初始對象 */    
  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請求遠程數(shù)據(jù) */    
  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); /* 相同于成功的回調(diào)函數(shù) */    
  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){ /* 判斷輸入內(nèi)容是否改變，兼容中文 */    
  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; /* 記住當(dāng)前有焦點的選項 */    
  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來創(chuàng)建對象了 */    
  296.  
  297.            return handler; /* 把內(nèi)部的處理函數(shù)傳到外部 */    
  298.  
  299.        })();    
  300.  
  301.        if ( this .length){ /* 處理選擇多個dom元素 */    
  302.  
  303.            for ( var a= this .length-1; a>=0; a--){ /* 調(diào)用方法為每個選擇的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.   /* 插件結(jié)束 */    
  322.  
  323.   })(window);    
  324.  

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

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. JavaScript跨域總結(jié)與解決辦法
  2. 使用Javascript開發(fā)移動應(yīng)用程序
  3. 10個令人驚奇的HTML5和JavaScript效果
  4. JavaScript初學(xué)者應(yīng)注意的七個細節(jié)
責(zé)任編輯：金賀 來源： JavaEye博客
js
相關(guān)推薦

2011-06-16 10:21:52

jQuery

2019-02-15 15:07:39

AndroidiOS移動系統(tǒng)

2022-07-27 20:36:57

webJS符號

2022-01-14 14:32:19

Shell腳本Js

2011-06-24 12:58:49

Qt LineEdit

2019-02-18 09:00:00

TextRank算法自然語言處理Python

2009-07-16 09:09:36

ibatis自動代碼

2012-04-27 10:00:43

jQuery插件

2022-03-03 10:49:46

Python自動追蹤代碼

2022-04-06 18:29:58

CSSJS輸入框

2022-05-05 08:02:44

MongoDBNode.js加密

2015-03-24 13:10:49

javascript中關(guān)村論壇提示效果

2023-09-01 09:00:00

人工智能

2024-09-10 08:10:50

2021-02-23 09:50:42

PythonJSWeb SSH

2010-06-22 14:58:50

JDOMJavaXML

2009-12-15 14:42:54

Internet協(xié)議

2024-02-26 12:48:28

ChatGPT人工智能論文

2009-03-31 16:41:38

網(wǎng)絡(luò)性能網(wǎng)絡(luò)監(jiān)控開源

2024-11-05 14:25:00

AI模型
點贊
收藏

51CTO技術(shù)棧公眾號