2012-08-10 47 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; 
}