How to override jquery autocomplete's menuitem? -
i using jquery's autocomplete:
next label , value, display picture. sending necessary data json java script. not sure how override auto-generated menu-item add <img src=pic_url />
it.
$("#search").autocomplete({ source: function (request, response) { $.ajax({ url: "/search/" + request.term, type: 'post', datatype: "json", success: function (data) { response($.map(data.username, function (item) { return { label: item.name, value: item.id, pic_url: item.pic_url }; })); }, error: function (data) { console.log('e', arguments); } }); ...
any suggestions please?
you can overriding _renderitem method:
$("#search").autocomplete({..}).data("autocomplete")._renderitem = function (ul, item) { var html = '<a><div class="list_item_container"><img src="' + item.picture + '" /><span>' + item.label + '</span></div></a>'; return $("<li></li>") .data("item.autocomplete", item) .append(html) .appendto(ul); };
Comments
Post a Comment