如何自定义格式自动完成插件结果? [英] 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) {返回 $( "
" ).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:Blue;'>" +$&"+"</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?

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