如何自定义格式化Autocomplete插件结果？

我正在使用jQuery UI Autocomplete插件.有没有办法在下拉结果中突出显示搜索字符序列？

例如,如果我将"foo bar"作为数据并输入"foo",我将在下拉列表中显示" foo bar",如下所示:

是的,如果你修补自动填充,你可以.

在jQuery UI的v1.8rc3中包含的自动完成小部件中,将在自动完成小部件的_renderMenu函数中创建建议弹出窗口.此函数定义如下:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

_renderItem函数定义如下:

_renderItem: function( ul, item) {
    return $( "
" )
        .data( "item.autocomplete", item )
        .append( "" + item.label + "" )
        .appendTo( ul );
},

因此,您需要做的是将_renderItem fn替换为您自己的创建,以产生所需的效果.这种技术,重新定义了库中的内部函数,我来学习称为猴子修补.我是这样做的:

  function monkeyPatchAutocomplete() {

      // don't really need this, but in case I did, I could store it and chain
      var oldFn = $.ui.autocomplete.prototype._renderItem;

      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"" + 
                  this.term + 
                  "");
          return $( "
" )
              .data( "item.autocomplete", item )
              .append( "" + t + "" )
              .appendTo( ul );
      };
  }

将该功能调用一次$(document).ready(...).

现在,这是一个黑客,因为:

为列表中呈现的每个项目创建了一个正则表达式obj.该正则表达式obj应该被重用于所有项目.

没有用于完成部件格式化的css类.这是一种内联风格.
这意味着如果您在同一页面上有多个自动填充功能,那么它们都会得到相同的处理.css风格可以解决这个问题.

...但它说明了主要技术,它适用于您的基本要求.

更新的工作示例:http://output.jsbin.com/qixaxinuhe

要保留匹配字符串的大小写,而不是使用键入字符的大小写,请使用以下行:

var t = item.label.replace(re,"" + 
          "$&" + 
          "");

换句话说,从上面的原始代码开始,您只需要替换this.term为"$&".

编辑
以上内容更改了页面上的每个自动完成小部件.如果您只想更改一个,请参阅此问题:
如何在页面上仅修补一个*自动完成实例？

这也有效:

       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1");
            return $("
")
                    .data("item.autocomplete", item)
                    .append("" + item.label + "")
                    .appendTo(ul);
        };

@JörnZaefferer和@ Cheeso的回应组合.

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);
            });
        }
    });
}

hackAutocomplete();

function monkeyPatchAutocomplete() {
   $.ui.autocomplete.prototype._renderItem = function (ul, item) {

      // Escape any regex syntax inside this.term
      var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

      // Build pipe separated string of terms to highlight
      var keywords = $.trim(cleanTerm).replace('  ', ' ').split(' ').join('|');

      // Get the new label text to use with matched terms wrapped
      // in a span tag with a class to do the highlighting
      var re = new RegExp("(" + keywords + ")", "gi");
      var output = item.label.replace(re,  
         '$1');

      return $("
")
         .append($("").html(output))
         .appendTo(ul);
   };
};

$(function () {
   monkeyPatchAutocomplete();
});