1

有几篇关于覆盖 jquery 的 ui.autocomplete 的 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;
};
4

1 回答 1

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;
}
于 2013-03-18T05:23:54.277 回答