[jquery-ui]jQueryUI: 如何自定义格式的自动完成功能插件的结果吗?

标签: jQuery jQuery-UI
发布时间: 2011/5/26 15:07:41
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我正在使用 jQuery 插件的用户界面自动完成。突出显示在下拉结果中的搜索字符序列的方法?

例如,如果我有数据: 它和我寻找我就变得"美孚 栏"中拖放的"foo 美孚栏。

解决方法 1:

是的你可以如果你猴子修补程序自动完成。

在包括在 v1.8rc3 的 jQuery UI 中的自动完成构件,建议的弹出窗口中的自动完成构件的 _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 与自己创作产生预期的效果。这一点,我了解到,称为 猴子修补。这里是我怎样做它:

  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 );
      };
  }

现在,这是黑客的攻击因为

  • 有为呈现列表中的每个项目创建正则表达式对象。正则表达式 obj 要重复使用的所有项目。

  • 那里是没有用的格式的已完成部分的 css 类。它是内联样式。
    这意味着如果您有多个自动在同一页上,他们将所有得到同样的待遇。Css 样式将会解决这个问题。

… … 但是它阐释了主要的技术,和它适合你的基本要求。

alt text

运行示例: http://jsbin.com/ezifi/4


要保留的这场比赛的情况下,相对于使用键入的字符的大小写的字符串使用下面这行:

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

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

解决方法 2:

这也适用:

       $.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 反应的组合。

解决方法 3:

更容易的方法,请试试这个:

$('ul: li: a[class=ui-corner-all]').each (function (){      
 //grab each text value 
 var text1 = $(this).text();     
 //grab user input from the search box
 var val = $('#s').val()
     //convert 
 re = new RegExp(val, "ig") 
 //match with the converted value
 matchNew = text1.match(re);
 //Find the reg expression, replace it with blue coloring/
 text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>")  + matchNew +    ("</span>"));

    $(this).html(text)
});
  }

解决方法 4:

如果改为使用第三方插件,它有一个突出显示选项: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(请参见选项选项卡)

解决方法 5:

不会这种猴子,修补程序适用于任何自动完成,在页上使用的所有实例吗?如果你有几个,你常常想对每个不同的结果呈现。

解决方法 6:

看看该组合框的演示,它包括结果突出显示: http://jqueryui.com/demos/autocomplete/#combobox

那里使用正则表达式还处理了 html 的结果。

解决方法 7:

感谢 Cheeso 帮助猴子修补程序。一旦小烦恼不过有什么办法,使更换保持原始文本的大小写吗?

例如:-键入 'c' 带来 ' *c* alifornia'。有没有一种方式来显示它 ' *C* alifornia' 吗?同样的短语中显示的字母。

这是真的很好谢谢 !

解决方法 8:

超有帮助。谢谢。+ 1。

这里是排序字符串必须开始与词的光版本:

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();
赞助商