Как я могу показать пустую опцию в автозаполнении JQuery?

Question

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

Элемент присутствует, он просто не имеет высоты.

Возможно ли иметь пустую опцию в списке автозаполнения?

Answer 1

Два решения, опубликованные здесь, не работают для меня._renderItem даже не вызывается для пустых опций.

Вот что сработало для меня: я сделал очень небольшое редактирование для функции, которая отображает опции выбора для автозаполнения элементов.

response(select.children("option").map(function () {
var text = $(this).text();
if (/*this.value && */(!request.term || matcher.test(text)))
    return {
        label: text.replace(
            new RegExp(
                "(?![^&;]+;)(?!<[^<>]*)(" +
                $.ui.autocomplete.escapeRegex(request.term) +
                ")(?![^<>]*>)(?![^&;]+;)", "gi"
            ), "<strong>$1</strong>"),
        value: text,
        option: this
    };
}));

Все чтоЯ комментировал часть условия.

/*this.value && */

Затем я добавил в свою таблицу стилей правило для автозаполнения элементов.

.ui-autocomplete .ui-menu-item a
{
    min-height: 15px;
}

Answer 2

У меня была такая же проблема, решил ее так:

$autocomplete.data("autocomplete")._renderItem = function(ul, item) {
    return $j( "<li></li>" )
        .data( "item.autocomplete", item )
        .append(item.label === '' ? '<a>&nbsp;</a>' : "<a>" + item.label + "</a>" )
        .appendTo(ul);
}

Когда метка элемента пуста (item.label === ''), я просто добавляю ссылку, содержащую неразрывный пробел ( ) вместо метки.

EDIT:

Я понял, что это может привести к уязвимости XSS. Убедитесь, что вы избегаете метки элемента, если она может содержать ввод пользователя. Либо используйте некоторую escape-функцию, например, escape-функцию underscore.js :

"<a>" + _.escape(item.label) + "</a>"

или создайте элемент привязки, используя jQuery, как это:

$('<a/>').text(item.label)

Answer 3

Итак, мы разобрались с решением. Вам нужно работать с методом _renderItem.

input.data("autocomplete")._renderItem = function(ul, item) {
    var listItem;
    if (item.label == "<strong></strong>") {
        listItem = $("<li></li>")
              .data("item.autocomplete", item)
              .append("<a><br></a>")
              .appendTo(ul);
    } else {
        listItem = $("<li></li>")
              .data("item.autocomplete", item)
              .append("<a>" + item.label + "</a>")
              .appendTo(ul);
    }

    return listItem;
};

Обратите внимание, что у вас должен быть пустой элемент строки в вашем первоначальном списке, чтобы это работало.

Answer 4

$("#ctrl").autocomplete({
    source: [ "\u00A0", "One", "Two" ]
});

Answer 5

У меня недавно была эта проблема, и хотя другие решения были в основном правильными, я обнаружил, что пропущен шаг.

if (this.value && (!request.term || matcher.test(text)))

необходимо изменить на

if (!request.term || matcher.test(text))

в противном случае в источнике не будет пустых элементов.

Как и в других решениях, измените _renderItem на

input.data('autocomplete')._renderItem = function(ul, item) {
        return $('<li></li>')
            .data('item.autocomplete', item)
            .append(item.label === '<strong></strong>' ? '<a>&nbsp;</a>' : '<a>' + item.label + '</a>' )
            .appendTo(ul);
        }    

Это смесь решений BentOnCoding и Тима Бюте

Answer 6

Вы можете расширить виджет автозаполнения следующим образом:

$.widget( "ui.autocomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var that = this;

        // add a blank item
        if (this.options.blankItem) {
            var blank = [{
                id: "",
                label: "<none>",
                value: ""
            }];
            items = blank.concat(items);
        }

        $.each(items, function (index, item) {
            var rendered = that._renderItemData(ul, item);

            // ensure min height on blank item. hmm, maybe a class would be better...
            if (index === 0 && that.options.blankItem) {
                $(rendered).find('div').css('minHeight', '30px');
            }
        });
    }
});

И затем использовать его следующим образом:

$( "#textbox" ).autocomplete({
        source: contactNames,
        blankItem: true
    })

Вот для этого Fiddle .

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

$( "#textbox" ).autocomplete({
    create: function(){
        $(this).data('ui-autocomplete')._renderMenu = function( ul, items ) {
            [ _renderMenu function contents... ]
        }
    }
})