Question

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

该项目存在，它只包含没有高度。

自动完成组合框可以有空白选项吗？

Answer 1

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

$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 === ''）时，我只需添加包含不间断空格（ ）的链接，而不是标签。

修改

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

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

或使用jQuery构建anchor元素：

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

Answer 2

这里发布的两个解决方案对我不起作用。甚至没有为空选项调用_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 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和TimBüthe的解决方案的混合

Answer 6

您可以像这样扩展自动填充小部件：

async

然后像这样使用它：

async function main(){
    page.on('request', async () => {
        await sub()
    });
}

async function sub(){
    await page.goto(url)
}

这里是Fiddle。

如果您出于某种原因不希望扩展窗口小部件，可以将函数添加到$.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
    })

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

6 个答案: