如何自定义格式化Autocomplete插件结果？ [英] How can I custom-format the Autocomplete plug-in results?

问题描述

我正在使用

解决方案

是的，如果你修补自动完成，你就可以。

自动完成小部件包含在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 $（< li>< / li>）
。 data（item.autocomplete，item）
 .append（< a>+ item.label +< / a>）
 .appendTo（ul）; 
}，
  

所以你需要做的是用你自己的创作替换_renderItem fn产生预期的效果。这项技术，重新定义了库中的内部函数，我来学习的是

---

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

  var t = item.label.replace（re，< span style ='font-weight：bold; color：蓝色;'>+ 
$&+ 
< / span>）; 
  

换句话说，从上面的原始代码开始，你只需要替换 this.term $&。

---

编辑

以上更改页面上的每个自动填充小部件。如果您只想更改一个，请看这个问题：

如何修补*页面上只有一个*自动填充实例？

I’m using the jQuery UI Autocomplete plug-in. Is there a way to highlight search character sequence in drop-down results?

For example, if I have "foo bar" as data and I type "foo" I’ll get "foo bar" in the drop-down, like this:

解决方案

Yes, you can if you monkey-patch autocomplete.

In the autocomplete widget included in v1.8rc3 of jQuery UI, the popup of suggestions is created in the _renderMenu function of the autocomplete widget. This function is defined like this:

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

The _renderItem function is defined like this:

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

So what you need to do is replace that _renderItem fn with your own creation that produces the desired effect. This technique, redefining an internal function in a library, I have come to learn is called monkey-patching. Here's how I did it:

  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,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

Call that function once in $(document).ready(...) .

Now, this is a hack, because:

• there's a regexp obj created for every item rendered in the list. That regexp obj ought to be re-used for all items.

• there's no css class used for the formatting of the completed part. It's an inline style.
  This means if you had multiple autocompletes on the same page, they'd all get the same treatment. A css style would solve that.

...but it illustrates the main technique, and it works for your basic requirements.

updated working example: http://output.jsbin.com/qixaxinuhe

---

To preserve the case of the match strings, as opposed to using the case of the typed characters, use this line:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&" + 
          "</span>");

In other words, starting from the original code above, you just need to replace this.term with "$&".

---

EDIT
The above changes every autocomplete widget on the page. If you want to change only one, see this question:
How to patch *just one* instance of Autocomplete on a page?

这篇关于如何自定义格式化Autocomplete插件结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！