Question

有几篇关于覆盖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;
};

Answer 1

您在寻找_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;
}

附加到jquery自动完成renderItem而不覆盖renderItem

1 个答案: