Question

我正在尝试获取诸如＆符号之类的html实体。和引号''出现在jquery ui自动完成菜单中。

我能够覆盖_renderItem方法来修复菜单中的显示，但是当选择一个项目时，编码的字符仍会出现在输入中

我如何在输入字段中修复显示？

感谢

这里的js代码：

var autocomplete_items = [{label:'fish &amp; chips',value:'fish&amp;chips',id:'01'},{label:'food',value:'food',id:'02'}];

var $keywords = $('#keywords');

$keywords.autocomplete({
    minLength:2,
    source: autocomplete_items
});

$keywords.data("autocomplete")._renderItem = function (ul, item){
    return $("<li></li>").data("item.autocomplete", item).append($("<a></a>").html(item.value)).appendTo(ul);
};

Answer 1

试试这个：http://jsfiddle.net/Gq2F6/4/

var autocomplete_items = [{label:'fish &amp; chips',value:'fish&amp;chips',id:'01'},{label:'food',value:'food',id:'02'}];

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();


var $keywords = $('#keywords');

$keywords.autocomplete({
   minLength:2,
   source: autocomplete_items,
   select: function (e, ui) {
      $keywords.val(decodeEntities(ui.item.value));
      return false;
   }
});

$keywords.data("autocomplete")._renderItem = function (ul, item){
   return $("<li></li>").data("item.autocomplete", item).append($("<a></a>").html(item.value)).appendTo(ul);
};

它使用autocomplete的select事件来覆盖单击其中一个返回项时发生的情况。它不是仅仅对输入字段执行值的默认复制，而是首先解码HTML实体。（最好解码这样的实体，而不是在你可能有不受信任的数据时使用jQuery的.text（））。

jquery ui autocomplete选择菜单html实体（与号和引号）

1 个答案: