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

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标签为空(item.label === '')时,我只需添加一个包含不间断空格( )而不是标签的链接.

编辑:

我意识到这可能会引入XSS漏洞.如果它可以包含用户输入,请确保转义项标签.使用一些转义函数,例如underscore.js的转义函数:

"<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;
};

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