如何在 jquery 自动完成中显示空白选项？

【问题标题】：How can i show a blank option in jquery autocomplete?如何在 jquery 自动完成中显示空白选项？
【发布时间】：2011-07-15 18:47:00
【问题描述】：

我正在使用启用组合框的 jquery 自动完成功能。我想显示一个空选项，但是每当我将初始选择的值设置为空字符串时，它就不会显示在组合框中。

该项目存在它只是不包含高度。

是否可以在自动完成组合框上有一个空白选项？

【问题讨论】：

您是否尝试在收到建议后在建议列表顶部附加一个“
”？您可以将其插入到“打开”事件中。

这不起作用，因为组合框在没有一些实际内容的情况下将行高减少到零。

标签： jquery jquery-ui jquery-autocomplete

【解决方案1】：

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

【讨论】：

我喜欢这个解决方案，很容易设置。干杯

【解决方案2】：

所以我们找到了解决方案。您需要使用 _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;
};

请注意，您的初始列表中必须有一个空白字符串项才能正常工作。

【讨论】：

【解决方案3】：

这里发布的两个解决方案对我不起作用。 _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;
}

【讨论】：

【解决方案4】：

我遇到了同样的问题，是这样解决的：

$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 === '')，我只需添加一个包含不间断空格 (&nbsp;) 的链接，而不是标签。

编辑：

我意识到这可能会引入 XSS 漏洞。如果项目标签可能包含用户输入，请确保对它进行转义。要么使用一些转义函数，例如underscore.js's escape function:

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

或者像这样使用 jQuery 构建锚元素：

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

【讨论】：

这对我有用。但是，我不得不为数据项使用ui-autocomplete。

【解决方案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 和 Tim Büthe 的混合解决方案

【讨论】：

【解决方案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... ]
        }
    }
})

【讨论】：