jQuery-input輸入框下拉提示層

效果圖

 

代碼部分

// JavaScript Document
(function($){
    $.fn.extend({
        "changeTips":function(value){
            value = $.extend({
                divTip:""
            },value)
            
            var $this = $(this);
            var indexLi = 0;
            
            //點擊document隱藏下拉層
            $(document).click(function(event){
                if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
                    var liVal = $(event.target).text();
                    $this.val(liVal);
                    blus();
                }else{
                    blus();
                }
            })
            
            //隱藏下拉層
            function blus(){
                $(value.divTip).hide();
            }
            
            //鍵盤上下執行的函數
            function keychang(up){
                if(up == "up"){
                    if(indexLi == 1){
                        indexLi = $(value.divTip).children().length-1;
                    }else{
                        indexLi--;
                    }
                }else{
                    if(indexLi ==  $(value.divTip).children().length-1){
                        indexLi = 1;
                    }else{
                        indexLi++;
                    }
                }
                $(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();    
            }
            
            //值發生改變時
            function valChange(){
                var tex = $this.val();//輸入框的值
                var fronts = "";//存放含有“@”之前的字符串
                var af = /@/;
                var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正則字面量方法，是不能用變量的。所以這里用的是new方式。


                //讓提示層顯示，並對里面的LI遍歷
                if($this.val()==""){
                    blus();
                }else{
                    $(value.divTip).
                    show().
                    children().
                    each(function(index) {
                        var valAttr = $(this).attr("email");
                        if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
                        //索引值大於1的LI元素進處處理
                        if(index>1){
                            //當輸入的值有“@”的時候
                            if(af.test(tex)){
                                //如果含有“@”就截取輸入框這個符號之前的字符串
                                fronts = tex.substring(tex.indexOf("@"),0);
                                $(this).text(fronts+valAttr);
                                //判斷輸入的值“@”之后的值，是否含有和LI的email屬性
                                if(regMail.test($(this).attr("email"))){
                                    $(this).show();
                                }else{
                                    if(index>1){
                                        $(this).hide();
                                    }    
                                }
                                
                            }
                            //當輸入的值沒有“@”的時候
                            else{
                                $(this).text(tex+valAttr);
                            }
                        }
                    })
                }    
            }
            
            
            //輸入框值發生改變的時候執行函數，這里的事件用判斷處理瀏覽器兼容性;
            if($.browser.msie){
                $(this).bind("propertychange",function(){
                    valChange();
                })
            }else{
                $(this).bind("input",function(){
                    valChange();
                })
            }
            

            //鼠標點擊和懸停LI
            $(value.divTip).children().
            hover(function(){
                indexLi = $(this).index();//獲取當前鼠標懸停時的LI索引值;
                if($(this).index()!=0){
                    $(this).addClass("active").siblings().removeClass();
                }    
            })
                    
        
            //按鍵盤的上下移動LI的背景色
            $this.keydown(function(event){
                if(event.which == 38){//向上
                    keychang("up")
                }else if(event.which == 40){//向下
                    keychang()
                }else if(event.which == 13){ //回車
                    var liVal = $(value.divTip).children().eq(indexLi).text();
                    $this.val(liVal);
                    blus();
                }
            })                
        }    
    })    
})(jQuery)

 

一、功能分析：

　　1.input輸入框的值，發生變化時，顯示提示的下拉層;

　　2.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容自動往“@”前面添加;

　　3.input輸入框的值，發生變化時，顯示提示的下拉層，會根據輸入的內容對下拉層“@”后面的內容進行篩選;

　　4.點擊下拉層里面的提示內容，會將其值，填充到輸入框;

　　5.按下鼠標回車鍵會將其選中的下拉層里的內容，填充到輸入框;

　　6.按鍵盤的“向上”或“向下”的方向鍵，可以在下拉層的選項中移動（循環移動，改變當前LI的背景色）;

　　7.鼠標懸停在下拉層的LI上面時，會有一個背景色。

 

二、功能實現：

　　1.input輸入框的值，發生變化時的事件是：propertychange（IE）或input(標准);

　　2.在發生propertychange事件的時候，取其輸入框的值，再取其“@”前面的值，並賦值給下拉層里面的LI加上LI的email屬性值;

　　3.在發生propertychange事件的時候，

　　　　3.1取其輸入框的值，再取其“@”后面的值，

　　　　3.2並將這個值與下拉層里面的LI的email屬性值進行正則匹配;

　　　　　  這里要注意,正則字面量方法，是不能用變量的。所以這里用的是new方式。

　　　　　　這里的正則是取的輸入框“@”后面的值，所以正則，是變化的。而LI的EMAIL屬性值是不變的

　　4.這里用了一個事件委托方式，將點擊事件綁定給document，然后通過判斷，點擊時最初觸發的DOM元素，是什么。來決定，

　　　　4.1否隱藏下拉提示層？

　　　　4.2還是需要將下拉層，選中的值，賦給輸入框

　　　　(這里不能直接使用，當輸入框失去焦點時，隱藏下拉提示層，因為會與點擊下拉層，將其值填入輸入框，這個功能有邏輯上的矛盾;)

　　5.和上面第4條差不多;

　　6.就是要注意，在鼠標懸停時，把當前的LI索引存入一個全局變量當中，這樣就可以告訴“向上”或“向下”按鍵時，的起始位置了;

　　7.遍歷LI，給它們的懸停事件都綁定一個改變其當前背景色的處理函數;

 

感謝“妙味課堂”提供的視頻

DEMO下載