custom autocomplete

by shengoo

HTML

<input id="topicAtcpl" type="text" style="width:200px;"></input>

JavaScript

var data = [{
    "DisplayName": "中国经济增长",
    "ID": 1,
    "NameCN": "中国经济增长",
    "NameEn": "China\u0027s economic growth"
}, {
    "DisplayName": "中国经济增长2",
    "ID": 2,
    "NameCN": "中国经济增长2",
    "NameEn": "China\u0027s economic growth2"
}, {
    "DisplayName": "中国经济增长3",
    "ID": 3,
    "NameCN": "中国经济增长3",
    "NameEn": "China\u0027s economic growth3"
}, {
    "DisplayName": "中国经济增长4",
    "ID": 4,
    "NameCN": "中国经济增长4",
    "NameEn": "China\u0027s economic growth4",
    "ModuleID": 1,
    "DiscriptionCN": "中国经济增长dddddddddd"
}, {
    "DisplayName": "中国经济增长5",
    "ID": 5,
    "NameCN": "中国经济增长5",
    "NameEn": "China\u0027s economic growth5"
}, {
    "DisplayName": "中国经济增长6",
    "ID": 6,
    "NameCN": "中国经济增长6",
    "NameEn": "China\u0027s economic growth6"
}, {
    "DisplayName": "中国经济增长7",
    "ID": 7,
    "NameCN": "中国经济增长7",
    "NameEn": "China\u0027s economic growth7"
}, {
    "DisplayName": "中国经济增长8",
    "ID": 8,
    "NameCN": "中国经济增长8",
    "NameEn": "China\u0027s economic growth8"
}];
$("#topicAtcpl").autocomplete({
    source: function (request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(data, function (value) {
            return matcher.test(value.NameEn || value.NameCN || value.DisplayName);
        }));
    },
    messages: {
        noResults: "",
        results: function (amount) {
            return "";
        }
    },
    select: function (event, ui) {
        console.log(ui.item.ID);

        return false;
    },
    focus: function (event, ui) {
        $("#topicAtcpl").val(ui.item.DisplayName);
        return false;
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.NameEn + "<br>" + item.DisplayName + "</a>")
        .appendTo(ul);
};