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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -