Question

尝试使用jQuery UI自动完成功能来处理可能包含实体的数据标签，例如连字符（ - ）。

我扩展了函数，以便在建议列表中显示的内容工作并显示字符而不是实体代码，但是当选择项目并填充文本字段时，无法弄清楚如何使其执行相同操作。 / p>

(function( $ ) {
    $(function() {
        var url = SQMSAutocomplete.url + "?action=sqms_auto_search";
        $( "#sqms-auto-search" ).autocomplete({
            source: url,
            delay: 500,
            minLength: 3,

            select: function(event, ui){
               console.log(ui.item.link)
                // window.location = ui.item.url
             }
        })
        .autocomplete( "instance" )._renderItem = function( ul, item ) {
            return $( "<li>" )
              .append( item.label )
              .appendTo( ul );
          };
    });

})( jQuery );

这有意义吗？

谢谢

Answer 1

您应该能够通过在将<input />的值分配给所需字符串之前解码HTML实体来实现此目的。

这是一个简单的例子：

select: function (event, ui) {
    event.preventDefault();

    this.value = $('<div />').html(ui.item.label).text();
}

使用JavaScript解码HTML实体的所有功劳都归功于this answer 。请注意以这种方式解码HTML实体的通常免责声明：您正在开放自己的XSS漏洞。

＆＃34;陷阱＆＃34;这是必须阻止select事件的默认操作，即将label或value置于输入内部。在这里，我们首先重写该行为并解码文本。

示例： http://jsfiddle.net/822fbwef/

Answer 2

您可以使用source选项的函数解码标签中的实体。这应该解决这两个问题。也就是说，在这种情况下，您不必覆盖._renderItem()函数。

$("#sqms-auto-search").autocomplete({
    source: function(request, response) {
        $.getJSON(url, { term: request.term }, function(items) {
            response($.map(items, function(item) {
                return $('<span></span>').html(item.label).text();
            });
        });
    },
    delay: 500,
    minLength: 3
});

jsfiddle

如何让jQuery UI Autocomplete忽略HTML实体

2 个答案: