jQuery自動完成與_renderItem和類別

作爲一個jQuery新手，我想知道是否有可能同時有jQuery _renderItem（用於自定義列表項HTML/CSS）和這些類別協同工作。jQuery自動完成與_renderItem和類別

我有我的_renderItem工作得很好，但我不知道如何將類別合併到混合中。

到目前爲止我的代碼：

$(document).ready(function() { 
$(':input[data-autocomplete]').each(function() { 
    $(':input[data-autocomplete]').autocomplete({ 
     source: $(this).attr("data-autocomplete") 
    }).data("autocomplete")._renderItem = function (ul, item) { 
     var MyHtml = "<a>" + "<div class='ac' >" +       
        "<div class='ac_img_wrap' >" + 
        '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' + 
        "</div>" + 
        "<div class='ac_mid' >" + 
        "<div class='ac_name' >" + item.value + "</div>" + 
        "<div class='ac_info' >" + item.info + "</div>" + 
        "</div>" + 
        "</div>" + "</a>"; 
     return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul); 
    }; 
}); 
});

爲自動完成的jQuery的文檔給出了下面的代碼示例：

$.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); 
    }); 
} 
});

我想獲得我的自定義HTML _renderItem和類別一起工作，任何人都可以幫助我將這兩者合併在一起，還是將我指向正確的方向？

來源

2012-03-12 LenPopLilly

星期一上午藍調已經解除了，我現在可以清楚地看到，這裏是爲尋找答案：

$(document).ready(function() { 

$.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); 
    }); 
} 
}); 

$(':input[data-autocomplete]').catcomplete({ 
source: $(':input[data-autocomplete]').attr("data-autocomplete") 
}).data("catcomplete")._renderItem = function (ul, item) { 
var MyHtml = "<a>" + "<div class='ac' >" + 
       "<div class='ac_img_wrap' >" + 
       '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' + 
       "</div>" + 
       "<div class='ac_mid' >" + 
       "<div class='ac_name' >" + item.value + "</div>" + 
       "<div class='ac_info' >" + item.info + "</div>" + 
       "</div>" + 
       "</div>" + "</a>"; 
return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul); 
}; 

});

來源

2012-04-05 17:24:57 LenPopLilly

+1 @LillyPop正是我需要做的，感謝您花時間發佈您自己的答案。 – 2012-09-26 02:22:39

有同樣的問題。對我來說，它的工作我以下列方式增加renderItem後：

searchBox.data("custom-catcomplete")._renderItem = function(ul, item) { 
       return $("<li></li>").data("item.autocomplete", item) 
        .append("<a>" + item.url + "</a>") 
        .appendTo(ul); 
      };

來源

2013-03-17 14:54:11 ydrozhdzhal

我一直有這樣的錯誤：不能設置屬性「_renderitem」的未定義

這是我固定的方式：

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
    }, 
    _renderMenu: function(ul, items) { 
     var that = this, 
     currentCategory = ""; 
     $.each(items, function(index, item) { 
     var li; 
     if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
     } 
     li = that._renderItemData(ul, item); 
     li.removeClass().addClass("search-result section-item"); 
     li.text(''); 
     li.append('<a class="ui-corner-all"><div class="display">' + item.label + '</div></a>'); 
     if (item.category) { 
      li.attr("aria-label", item.category + " : " + item.label); 
     } 
     }); 
    } 
    });

正如你看到的，我從來沒有打電話_renderItem

你可以看到完整的演示click here for jsfiddle

來源

2016-02-02 14:54:25 Sanchitos

jQuery自動完成與_renderItem和類別

回答

相關問題