首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jquery-ui-autocomplete -覆盖_renderMenu和_renderItem

jquery-ui-autocomplete -覆盖_renderMenu和_renderItem
EN

Stack Overflow用户
提问于 2012-08-09 15:05:53
回答 1查看 9.6K关注 0票数 5

我已经使用jquery-ui实现了一个自动完成功能。我希望将显示的项目数量限制为10个,并自定义每个项目的格式。以下是代码

代码语言:javascript
复制
$("#text1").autocomplete({
  minLength: 2,
  source: function (request, response) {
  var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i")
  , results = [];
  $.each(source, function (i, value) {
    if (matcher.test(value.value) && $.inArray(value.label, results) < 0) {
    results.push(value.label);
    }
   });

  response(results);
  }
 }).data("autocomplete")
      ._renderMenu = function(ul, items) {
        var self = this;
        $.each(items, function (index, item) {
            if (index < 10) {
              $.ui.autocomplete.prototype._renderItem = function(ul, item) {
                var re = new RegExp("^" + this.term, "i");
                var t = item.label.replace(re, "<span style='font-weight:bold;color: Blue;'>" + "$&" + "</span>");
                var listItem = $("<li></li>")
                               .data("item.autocomplete", item)
                               .append("<a>" + t + "</a>")
                               .appendTo(ul);
                return listItem;

              }
            }
            });
      };

这似乎不起作用,因为它没有抛出任何结果。对此有什么帮助吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-09 17:27:24

我想通了。似乎我必须同时重写_renderMenu和_renderItem。它现在起作用了。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11878339

复制
相关文章

相似问题

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