2012-08-10 46 views
1

有幾個帖子關於覆蓋jQuery的ui.autocomplete的renderItem。那麼簡單地追加它呢?追加到jquery自動完成renderItem沒有覆蓋renderItem

我的自動完成搜索結果正在使用此代碼很好 - 但是我的麻煩是使用._renderItem函數阻止出現在輸入標記中的選定結果。 有人可以幫助選擇功能?

我的代碼(部分):

$j('.searchInput').autocomplete({ 
     source: BASE_URL + "include/php/nocache/jquery_search_autocomplete.php", 
     select: function(event, ui) { 
      // move search term into input 
      console.log(ui); 
     } 
}).data("autocomplete")._renderItem = function(ul, item) { 
      var li = $j("<li class='autoli'></li>"); 
      li.data("item.autocomplete", item); 
      if ((item.category_title)) { 
       li.append("<a>" + item.category_title + "</a>") 
       li.append("<a>" + item.title + "</a>") 
       li.append("<img class='autoimg' src='" + BASE_URL + 'images/category/tnails_75/' + item.category_id + '.jpg' + "' />") 
      } 
      if ((item.search_phrase)) { 
       li.append("<a>" + item.search_phrase + "</a>") 
       li.append("<a>" + item.title + "</a>") 
       li.append("<img class='autoimg' src='" + BASE_URL + 'images/category/tnails_75/' + item.category_id + '.jpg' + "' />") 
      } 
      if ((item.web_supplier_sku)) { 
       li.append("<a href='" + item.url + "'>" + item.web_supplier_sku + "</a>") 
       li.append("<a href='" + item.url + "'>" + item.web_name + "</a>") 
       li.append("<img class='autoimg' src='" + BASE_URL + 'images/sku/tnails_75/' + item.qm_sku + '.jpg' + "' />") 
      } 
      li.appendTo(ul); 
      return li; 
}; 
+0

什麼由你的PHP代碼看上去像(JSON編碼)返回的數據? – 2012-08-10 20:32:01

回答

0

您是否在尋找_renderMenu?這使您可以自行創建菜單。但是你仍然需要遍歷每個項目以賦予它data()屬性,否則它將無法工作。

這裏是我的:

var userTemplate = Handlebars.compile($("#userItem").html()); 

// ... later in the code: The renderMenu function... 
_renderMenu: function(ul, items) { 

items.forEach(function(person) { 
    ul.append(
    $(userTemplate({items: person})).data("ui-autocomplete-item", person) 
); 
}); 

return ul; 
}