var availableItems = [{ type: "book", title: "Recent", summary: "heading", value:"value" }, { type: "audio", title: "All", summary: "all", value:"all" }, { type: "movie", title: "Lorem", summary: "lorem", value:"lorem" }, ]; var CommonSearch = (function (my) { var key = ""; $('#searchContent').autocomplete({ source: availableItems, minLength: 0, focus: function (event, ui) { $("#searchContent").val(ui.item.title); return false; }, select: function (event, ui) { alert(JSON.stringify(ui.item)); return false; }, create: function () { $(this).data('ui-autocomplete')._renderItem = function (ul, item) { ul.css({ 'border': 'solid 1px' }); var reg = new RegExp($('#searchContent').val(), 'ig'); var title = item.title.replace(reg, my.AddHighlighForKeyword); var summary = item.summary.replace(reg, my.AddHighlighForKeyword); var value = item.value.replace(reg, my.AddHighlighForKeyword); var innerHtml = '<a><table class="home_search">' + '<tr><td class="type" rowspan="2">' + item.type + '</td>' + '<td class="name">' + title + '</td>' + '<td rowspan="2" align="right">' + value + '</td>' + '</tr>' + '<tr><td class="name">' + summary + '</td></tr></table></a>'; return $("<li>") .data('ui-autocomplete-item', item) .append(innerHtml) .addClass('ui-menu-item') .appendTo(ul); }; }, }).focus(function () { $(this).autocomplete("search"); }); my.AddHighlighForKeyword = function (match) { return '<span class="highlight">' + match + '</span>'; }; return my; }(CommonSearch || {}));
<input id="searchContent" type="text" style="width:300px;" />
.home_search { width: 100%; } .home_search .type { border: 1px solid; text-align: center; border-radius: 4px; width: 50px; height: 30px; } .home_search .highlight { color: #ff8800; }