jquery - 如何让 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 漏洞。

这里的“问题”是您必须阻止 select 事件的默认操作，即将 label 或 value 放入输入内部。在这里，我们将覆盖该行为并首先解码文本。

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