Автозаполнение jQuery UI: поиск по нескольким атрибутам одного массива

Привет я пытаюсь заставить виджет автозаполнения jQuery UI работать так, чтобы он искал совпадения из несколько атрибуты моего массива (а не только тот, который он делает по умолчанию).

я возился с их примером, однако я все еще не уверен, как это решить.

http://jsfiddle.net/FUZPN/

вот мой формат массива в script

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        other: "9834275 9847598023 753425828975340 82974598823"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        other: "98 83475 9358 949078 8 40287089754 345 2345"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        other: "49857 2389442 573489057 89024375 928037890"
    }

что я ищу, так это то, что если вы наберете "написать", первый элемент должен появиться в автозаполнении, аналогично, если вы вводите "jq", первые 2 элемента должны появиться.

по словам документация:

Array: массив может использоваться для локальных данных. Существует два поддерживаемых формата:

  • массив строк: [ "Choice1", "Choice2" ]

  • массив объектов со свойствами метки и значения:[ { label: "Choice1", value: "value1" }, ... ]

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

как я (жесткий)код, чтобы источник использовал 2 метки (label и desc?) вместо одного метка?

(Извините, я искал много подобных вопросов, однако все они направлены на несколько источников, которых здесь нет, поскольку у меня есть только 1 массив .. это?)

10
jquery jquery-ui jquery-ui-autocomplete

1 ответов

автозаполнение принимает третий тип Источник, функция, которая может предоставить данные любым способом, который вы считаете нужным:

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

  • объект запроса с одним свойством term, которое ссылается на значение, находящееся в настоящее время в текстовом вводе. Например, если пользователь вводит "new yo" in a поле city, термин автозаполнения будет равен "new yo".
  • обратный вызов, ответ, который ожидает один аргумент: данные, чтобы предложить пользователю. Эти данные должны быть отфильтрованы на основе предоставляется срок, и может быть в любом из форматов, описанных выше для простые локальные данные. Это важно при предоставлении пользовательского источника обратный вызов для обработки ошибок во время запроса. Вы должны всегда вызывать обратный вызов ответа, даже если вы столкнулись с ошибкой. Это гарантирует, что штучка всегда имеет правильное состояние.

Это означает, что вы можете написать что-то вроде этого

$( "#project" ).autocomplete({
    source: function (request, response) {
        // request.term is what you typed
        console.log(request.term); 

        //call response with an array containing the filtered data
        response([...]); 
    }
});

простое решение вашей проблемы:

function lightwell(request, response) {
    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);
}

$( "#project").autocomplete({
    source: lightwell
});

и скрипка http://jsfiddle.net/FUZPN/5/

11