如何获得 jQuery UI 自动完成以忽略 HTML 实体

Question

尝试获取 jQuery UI 自动完成以处理可能包含实体的数据标签，例如连字符 (-)。

我扩展了该功能，以便建议列表中显示的内容起作用并显示字符而不是实体代码，但无法弄清楚如何在选择项目并填充文本字段时使其执行相同的操作.

(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 漏洞敞开大门。

这里的"gotcha"是你必须阻止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