Автозаполнение пользовательского интерфейса JQuery - отображение и поиск различных данных

Question

Я пытаюсь сделать то, что должно быть простым изменением способа автозаполнения jquery ui.

В настоящее время я предоставляю исходному свойству объекты следующего формата:

{label: "Display This", value: "Search This", other: "This is some other random data"}

Как показывают мой пример и заголовок, я хотел бы отобразить в выпадающем меню другие данные, чемпользователь вводит для поиска.Как это возможно?Я бы предпочел не использовать плагин Джо Шмо.

Спасибо!

Answer 1

Вот один из способов сделать это (предполагается, что локальный источник данных):

var source = [{label: "Display This", value: "Search This", other: "This is some other random data"}];

$("#auto").autocomplete({
    source: function(request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(source, function(value) {
            return matcher.test(value.value);
        }));
    }
});

Пример: http://jsfiddle.net/dHFk8/ (поиск "Поиск")

Если вы используете удаленный источник данных, тогда вы можете выполнять любую логику поиска, какую захотите, в коде на стороне сервера.

Answer 2

Вы можете реализовать вызов ajax в своем методе «source», а в методе success этого вызова вы можете создать карту в response ().И вы можете установить свойства "label" и "value":

Это может работать (не проверено):

// sample data returned from ajax call
var sampleData = [
    { label: 'test label', value: 'test value' },
    { label: 'test label1', value: 'test value1' },
    { label: 'test label2', value: 'test value2' },
    { label: 'test label3', value: 'test value3' }
];
response($.map(sampleData, function (item) {
    return {
        label: item.label,
        value: item.value
    }
}));