這篇文章主要講解了“用js實(shí)現(xiàn)輸入提示功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“用js實(shí)現(xiàn)輸入提示功能”吧！

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元周村做網(wǎng)站,已為上家服務(wù),為周村各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

完成有以下功能：

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

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

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

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

支持中文。

首先是js的核心部分，其各部分都有較詳細(xì)的說明，代碼如下：

view source print ?

  ;( function (window){       /* 插件開始 */       var autoComplete= function (o){            var handler=( function (){                var handler= function (e,o){ return new handler.prototype.init(e,o); }; /* 為每個(gè)選擇的dom都創(chuàng)建一個(gè)相對應(yīng)的對象，這樣選擇多個(gè)dom時(shí)可以很方便地使用 */                handler.prototype={                    e: null , o: null , timer: null , show:0, input: null , popup: null ,                    init: function (e,o){ /* 設(shè)置初始對象 */                        this .e=e, this .o=o,                        this .input= this .e.getElementsByTagName( this .o.input)[0],                        this .popup= this .e.getElementsByTagName( this .o.popup)[0],                        this .initEvent(); /* 初始化各種事件 */                   },                   match: function (quickExpr,value,source){ /* 生成提示 */                       var li = null ;                       for ( var i in source){                           if ( value.length>0 && quickExpr.exec(source[i])!= null ){                               li = document.createElement( 'li' );                               li.innerHTML = '' +source[i]+ 'a>' ;                              this .popup.appendChild(li);                           }                       }                       if ( this .popup.getElementsByTagName( 'a' ).length)                           this .popup.style.display= 'block' ;                       else                            this .popup.style.display= 'none' ;                    },                    ajax: function (type,url,quickExpr,search){ /* ajax請求遠(yuǎn)程數(shù)據(jù) */                       var xhr = window.ActiveXObject ? new ActiveXObject( "Microsoft.XMLHTTP" ) : new XMLHttpRequest();                        xhr.open(type,url, true ); /* 同異步在此修改 */                        xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );                       var that= this ;                       xhr.onreadystatechange = function (){                           if (xhr.readyState==4) {                                if (xhr.status==200) {                                    var data = eval(xhr.responseText);                                   that.match(quickExpr,search,data); /* 相同于成功的回調(diào)函數(shù) */                                } else {                                    alert( "請求頁面異常!" ); /* 請求失敗 */                                }                            }                        };                        xhr.send( null );                    },                   fetch: function (ajax,search,quickExpr){                        var that= this ;                        this .ajax(ajax.type,ajax.url+search,quickExpr,search);                   },                    initEvent: function (){ /* 各事件的集合 */                        var that= this ;                       this .input.onfocus = function (){                            if ( this .inputValue) this .value = this .inputValue;                            var value= this .value, quickExpr=RegExp( '^' +value, 'i' ), self= this ;                            var els = that.popup.getElementsByTagName( 'a' );                            if (els.length>0) that.popup.style.display = 'block' ;                            that.timer=setInterval( function (){                                if (value!=self.value){ /* 判斷輸入內(nèi)容是否改變，兼容中文 */                                   value=self.value;                                    that.popup.innerHTML= '' ;                                    if (value!= '' ){                                       quickExpr=RegExp( '^' +value);                                        if (that.o.source) that.match(quickExpr,value,that.o.source);                                        else if (that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);                                    }                                }                            },200);                        };                       this .input.onblur = function (){ /*  輸入框添加事件 */                            if ( this .value!= this .defaultValue) this .inputValue = this .value;                            clearInterval(that.timer);                            var current=-1; /* 記住當(dāng)前有焦點(diǎn)的選項(xiàng) */                            var els = that.popup.getElementsByTagName( 'a' );                            var len = els.length-1;                           var aClick = function (){                               that.input.inputValue = this .firstChild.nodeValue;                                that.popup.innerHTML= '' ;                                that.popup.style.display= 'none' ;                               that.input.focus();                            };                            var aFocus = function (){                                for ( var i=len; i>=0; i--){                                    if ( this .parentNode===that.popup.children[i]){                                       current = i;                                        break ;                                    }                                }                                //that.input.value = this.firstChild.nodeValue;                                for ( var k in that.o.elemCSS.focus){                                    this .style[k] = that.o.elemCSS.focus[k];                                }                            };                           var aBlur= function (){                               for ( var k in that.o.elemCSS.blur)                                   this .style[k] = that.o.elemCSS.blur[k];                            };                            var aKeydown = function (event){                                eventevent = event || window.event; /* 兼容IE */                                if (current === len && event.keyCode===9){ /* tab鍵時(shí)popup隱藏 */                                    that.popup.style.display = 'none' ;                                } else if (event.keyCode==40){ /* 處理上下方向鍵事件方便選擇提示的選項(xiàng) */                                    current++;                                    if (current<-1) current=len;                                   if (current>len){                                        current=-1;                                       that.input.focus();                                    } else {                                        that.popup.getElementsByTagName( 'a' )[current].focus();                                    }                                } else if (event.keyCode==38){                                    current--;                                   if (current==-1){                                        that.input.focus();                                   } else if (current<-1){                                        current = len;                                        that.popup.getElementsByTagName( 'a' )[current].focus();                                    } else {                                       that.popup.getElementsByTagName( 'a' )[current].focus();                                    }                                }                            };                            for ( var i=0; i<els.length; i++){ /* 為每個(gè)選項(xiàng)添加事件 */                                els[i].onclick = aClick;                                els[i].onfocus = aFocus;                                els[i].onblur = aBlur;                                els[i].onkeydown = aKeydown;                            }                        };                        this .input.onkeydown = function (event){                           eventevent = event || window.event; /* 兼容IE */                            var els = that.popup.getElementsByTagName( 'a' );                            if (event.keyCode==40){                                if (els[0]) els[0].focus();                            } else if (event.keyCode==38){                               if (els[els.length-1]) els[els.length-1].focus();                            } else if (event.keyCode==9){                                if (event.shiftKey== true ) that.popup.style.display = 'none' ;                            }                        };                        this .e.onmouseover = function (){ that.show=1; };                        this .e.onmouseout = function (){ that.show=0; };                        addEvent.call(document, 'click' , function (){                            if (that.show==0){                                that.popup.style.display= 'none' ;                            }                        }); /* 處理提示框dom元素不支持onblur的情況 */                    }                };                handlerhandler.prototype.init.prototype=handler.prototype; /* JQuery style，這樣我們在處的時(shí)候就不用每個(gè)dom元素都用new來創(chuàng)建對象了 */                return handler; /* 把內(nèi)部的處理函數(shù)傳到外部 */            })();            if ( this .length){ /* 處理選擇多個(gè)dom元素 */                for ( var a= this .length-1; a>=0; a--){ /* 調(diào)用方法為每個(gè)選擇的dom生成一個(gè)處理對象，使它們不互相影響 */                    handler( this [a],o);                }            } else { /* 處理選擇一個(gè)dom元素 */                handler( this ,o);           }            return this ;       };       return window.autoComplete = autoComplete; /* 暴露方法給全局對象 */       /* 插件結(jié)束 */       })(window);

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

view source print ?

var getElementsByClassName = function (searchClass, node, tag) { /* 兼容各瀏覽器的選擇class的方法；(寫法參考了博客園：http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html  ，想了解更多請看這個(gè)地址) */           nodenode = node || document, tagtag = tag ? tag.toUpperCase() : "*" ;            if (document.getElementsByClassName){ /* 支持getElementsByClassName的瀏覽器 */               var temp = node.getElementsByClassName(searchClass);                if (tag== "*" ){                    return temp;               } else {                    var ret = new Array();                    for ( var i=0; i<temp.length; i++)

感謝各位的閱讀，以上就是“用js實(shí)現(xiàn)輸入提示功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對用js實(shí)現(xiàn)輸入提示功能這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

分享文章：用js實(shí)現(xiàn)輸入提示功能
文章轉(zhuǎn)載：http://www.rwnh.cn/article30/jishpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化、ChatGPT、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)