Как я могу изменить фильтр результатов в автозаполнении?

Question

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

Могу ли я переопределить поведение автозаполнения по умолчанию для достижения этой цели или мне нужна альтернативная структура?

Answer 1

Существует встроенный способ сделать это: просто предоставьте функцию для опции source в виджете автозаполнения:

var items = ['Foo', 'Bar', 'Hello', 'Goodbye', '1234'];


$("#autocomplete").autocomplete({
    source: function(request, response) {
        // The term the user searched for;
        var term = request.term;

        // Extract matching items:
        var matches = $.grep(items, function(item, index) {
            // Build your regex here:
            return /\d+/.test(item);
        });

        // let autocomplete know the results:
        response(matches);
    }
});

http://jsfiddle.net/RSyrX/

Обратите внимание, что этот пример всегда будет возвращать "1234" из-за простого регулярного выражения, которое я использовал. Возможно, что-то более полезное - это построение регулярного выражения на основе термина (также возможно).

Это на самом деле очень похоже на способ, которым виджет сам фильтрует результаты. Проверьте эту строку для функции фильтра и эту строку , чтобы увидеть, как она вызывается, если вы предоставляете массив как параметр source.

Answer 2

Да, вы можете переопределить поведение автозаполнения по умолчанию в jQueryUI.В вашем контроллере вы должны написать свою серверную логику для генерации набора результатов.jQuery автозаполнение по умолчанию использует q в качестве параметра.С помощью которого вы можете получить значения и сгенерировать результирующий набор, который будет представлять собой список.Я думаю, что это даст вам идею.Автозаполнение просто отображает результат при каждом нажатии клавиши.Вы должны позаботиться о отображении логики

Answer 3

Я создал пример, в котором отображаются только результаты, содержащие строку 'jQuery' в метке:

var projects = [
    {
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"},
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"},
{
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"}
];

$("input").autocomplete({
    source: projects
}).data("autocomplete")._renderItem = function(ul, item) {

    // this is where you can implement your regex
    if (item.label.indexOf("jQuery") !== -1) {
        return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
    }
};

Демо здесь.