首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何自定义自动完成插件结果的格式?

如何自定义自动完成插件结果的格式?
EN

Stack Overflow用户
提问于 2010-03-13 05:18:47
回答 13查看 99K关注 0票数 168

我在用jQuery UI Autocomplete plug-in。有没有办法在下拉结果中突出显示搜索字符序列?

例如,如果我有“foo bar”作为数据,我键入"foo“,我会在下拉列表中得到”foobar“,如下所示:

EN

回答 13

Stack Overflow用户

回答已采纳

发布于 2010-03-13 07:13:16

是的,你可以,如果你的猴子补丁自动补全。

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

代码语言:javascript
复制
_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

_renderItem函数的定义如下:

代码语言:javascript
复制
_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

因此,您需要做的是用您自己创建的能够产生所需效果的_renderItem fn替换它。我学到的这种在库中重新定义内部函数的技术称为。下面是我是如何做到的:

代码语言:javascript
复制
  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 );
      };
  }

$(document).ready(...)中调用该函数一次。

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

  • 为列表中呈现的每个项目创建了一个regexp对象。该regexp obj应该在所有项目中重用。
  • 没有用于设置已完成零件格式的css类。这是一种内联样式。

这意味着如果你在同一页上有多个自动补全,它们都会得到相同的处理。css样式就可以解决这个问题。

...but它说明了主要的技术,并且它可以满足您的基本需求。

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

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

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

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

编辑

上面的代码改变了页面上的每个自动完成小部件。如果您只想更改其中一个,请参阅以下问题:

How to patch *just one* instance of Autocomplete on a page?

票数 234
EN

Stack Overflow用户

发布于 2010-08-11 19:29:10

这也是可行的:

代码语言:javascript
复制
       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };

@Jörn Zaefferer和@Cheeso的回应的组合。

票数 65
EN

Stack Overflow用户

发布于 2011-04-21 04:43:43

非常有帮助。谢谢。+1。

这是一个简单的版本,它对“字符串必须以术语开头”进行排序:

代码语言:javascript
复制
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();
票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2435964

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档