jquery-ui自动完成选择菜单html实体(符号和引号）

jquery ui autocomplete select menu html entities (ampersand and quotes)

本文关键字：符号 实体 html 菜单 选择 jquery-ui      更新时间：2023-09-26

我正在尝试获取html实体，如&和引号"以显示在jquery ui自动完成菜单中。

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

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

看看这把小提琴http://jsfiddle.net/Gq2F6/2/

感谢

js代码：

var autocomplete_items = [{label:'fish & chips',value:'fish&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);
};

试试这个：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);
};

它使用自动完成的select事件来覆盖当您单击某个返回项目时发生的情况。它不只是将值默认复制到输入字段，而是首先对HTML实体进行解码。（当您可能有不可信的数据时，最好像这样解码实体，而不是使用jQuery的.text（））。

相关文章：