使用json对象而不是字符串的Bootstrap typeahead

时间:2013-05-03 20:21:50

标签: javascript json twitter-bootstrap bootstrap-typeahead

我通过处理bootstrap一个简单的扁平json字符串数组(如["php","php4","php5"])来获得typeahead。在这种情况下,所有标准函数都能满足我的需求。

但是,我想以下列格式提供数据:

[
    {
        "name":"php",
        "count":123
    },
    {
        "name":"php4",
        "count":3532
    },
    {
        "name":"php5",
        "count":999
    }
]

有了这个,我想格式化我的预先输入以使用名称和计数。也许产生看起来像 php5(999)的东西,当你选择typeahead它只会输出 php5 。我认为如果我只是覆盖所有函数就很容易做到。

$('.input-classname').typeahead({
        source: function (query, process) {
            // Source here
        },
        updater: function (item) { // What gets sent to the input box
            return item.name;
        },
        highlighter: function(item) {
            return item.name + " (" + item.count + ")";
        },
        matcher: function (item) {
            // Do the matching
        },
        sorter: function (items) {
            // Do the sorting
        }
    });

这很好但我想使用highlightermatchersorter基础版本来完成繁重的工作。我只是传递item.name而不是item。但是我不知道如何获得这些函数的基本版本。有没有办法做到这一点?

1 个答案:

答案 0 :(得分:1)

当然,只需在Typeahead原型上调用/应用方法,例如

var Typeahead = $.fn.typeahead.Constructor;

$(".input-classname").typeahead({
  // ...
  matcher: function (item) {
    // do something with item
    return Typeahead.prototype.matcher.call(this, item);
  },

  sorter: function (items) {
    // alternatively
    // do something with items
    return this.constructor.prototype.sorter.call(this, items);
  }
});