2012-11-16 46 views
9

所以我建立一個自定義的自動完成框,看起來像這樣的本地數據的數組是數據源:jQuery的自動完成對焦的事件項未定義

{ 
      label: "joe", 
      category: "people" 
} 

我定製了rendermenu功能,使類別像這樣的菜單:

$("#search").catcomplete(getConfig(all)); 

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      if (item.category != currentCategory) { 
       ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 
      self._renderItem(ul, item); 
     }); 
    } 
}); 

,我初始化一切都是由做

其中getConfig是:但不知何故不具備的項目定義

function getConfig(data) { 
// autocomplete box configuration for searchbars 

return { 
    delay: 0, 
    source: function (request, response) { 
     var prune = request.term, 
      arr = prune.split(":"); 

     if (arr.length > 2) { 
      response(); 
     } else { 
      response($.ui.autocomplete.filter(data, arr[arr.length - 1])); 
     } 
    }, 
    select: function (e, ui) { 
     e.preventDefault(); 
     addBit(ui.item); 
     e.originalEvent.stopPropagation(); 
    }, 
    focus: function (e, ui) { 
     //console.log(e); 
     //e.preventDefault(); 
     //console.log(ui); 
     //$('ul.autocomplete li#floatinput input#search').val(ui.item.category + ":" + ui.item.label); 
    }, 
    position: { 
     my: "left top", 
     at: "left bottom", 
     of: $("ul.autocomplete"), 
     collision: "flip flip" 
    } 
} 
} 

的焦點事件。我試圖擺脫焦點函數,只是爲了得到:Uncaught TypeError:無法讀取未定義的屬性'值'。這意味着事件的默認行爲不起作用。

任何建議,歡迎!

這裏有一個小提琴我,以幫助說明>http://jsfiddle.net/ahTCW/3/

回答

16

使用_renderItemData與jQueryUI的不_renderItem> = 1.9:

// getconfig 
$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      if (item.category != currentCategory) { 
       ul.append("<li style='clear:both'class='ui-autocomplete-category'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 
      self._renderItemData(ul, item); 
     }); 
    } 
}); 

您有另一個錯誤發生:

Uncaught TypeError: Cannot read property 'nodeType' of undefined

這一種是由您傳遞給位置對象的of屬性的選項引起的。實例化自動填充小部件時,頁面上不存在ul.autocomplete

更新了例:http://jsfiddle.net/kHNS5/

+0

位置的對象不會是在我的實際網站的錯誤,我只是沒有包括在撥弄所有的HTML。但無論如何非常感謝,我也在IRC的某個地方得到了答案:D互聯網是一個不錯的地方! –