jquery autocomplete

highlight and custom data

by shengoo

HTML

<input id="searchContent" type="text" style="width:300px;" />

CSS

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

JavaScript

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>';
...