效果圖

?

代碼部分

// 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下載

總結

以上是生活随笔為你收集整理的jQuery-input输入框下拉提示层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。