本文實(shí)例講述了jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時得到顯示列表功能。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)建站擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、重慶APP開發(fā)公司、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

在做項(xiàng)目的時候，客戶有這樣的需求，將以前輸入過的內(nèi)容，在某個文本框上用列表的形式提示出來，可以選擇，換言之，就如同我們用谷歌搜索，或者百度搜索一樣，輸入一些關(guān)鍵詞，會自動提示，這個功能就叫autocomplete. 當(dāng)然在 jquery  UI  下有 插件，具體下載的地方，搜索就知道了。重點(diǎn)是，我現(xiàn)在的用法，是需要在文本框獲取焦點(diǎn)的時候，就彈出待選擇的列表。而傳統(tǒng)的是必須在輸入文字之后才出現(xiàn)。經(jīng)過發(fā)現(xiàn)，jquery ui autocomplete 用如下方法可以實(shí)現(xiàn)

 
 
 
 
 
 
 
 
 
 
 
 


autocomplete 

Search: 


A categorized search result. Try typing "a" or "n".

代碼來源于官網(wǎng)例子，稍稍改動了一下，但貌似在IE 下有點(diǎn)問題，選擇某個選項(xiàng)之后，這個列表框不消失，還一直存在，比較郁悶。

在google 上搜索了一下，發(fā)現(xiàn)了一篇文章，也講到了這個問題。后來用如下方法解決，不過是失去焦點(diǎn)的方式做的。

function dynamicAutocomplete(){
   $("#search").autocomplete({
   minLength: 0,
   source: data,
    focus :function () {
     return false;
    },
    select: function(event, ui){
    $this = $(this);
   setTimeout(function () {
    $this.blur();
    }, 1);
   }
   }).focus(function(){
     $(this).autocomplete("search");
     return false;
   }
  );
 };

在ie 下面用了timeout 來解決，在網(wǎng)上看到很多人說，在focus  方法中 return false 就可以解決，但我就是沒有測試成功.

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。