1

我已经重写了 typeahead 方法以启用 AJAX 调用（获取 JSON 对象结果，因为我需要一个name要显示的字段和一个url要隐藏的字段）。

但这还不够，当用户记录一些研究时，一切正常，但是如果您选择结果，或者只是按TAB，输入中会出现 JSON 字符串，例如：

{
    "name":"test",
    "url":"http://mysite.com/test"
}

我只想name在输入中显示该字段，就像我dropbox通过覆盖highlighter方法一样，但我不知道这是否可能。

highlighter: function (obj) 
{
    var item = JSON.parse(obj);
    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
    return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) 
    {
        return '<strong>' + match + '</strong>'
    });
}

有没有办法做这个简单的事情？

我无法理解他们提供了我们可以覆盖的方法，如果我们不能......

4

1 回答 1

1

默认情况下，Typeahead 2.x 不允许存储或加载 JSON 数据。看起来您正在尝试在您的highlighter方法中解决这个问题JSON.parse，但您可以覆盖一些类似于不同问题的方法。

您可以覆盖 Typeahead 中的几乎任何方法，但是您必须作弊才能对renderand执行此操作select，您需要将其从使用更改为attr('data-value' ...)，data('value' ...)就像我在另一个答案中所做的那样。

除此之外，您必须更改主动接触 JSON 对象的每一个方法：highlighter、matcher、sorter和updater.

因为您只想在突出显示中显示名称，所以您可以通过对上一个问题进行一些highlighter修改来避免更改render：

typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)  // <- modified for data
        i.find('a').html(that.highlighter(item.name)) // <- modified for .name
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

忽略select我在另一个答案中显示的 ，您仍然需要覆盖matcher、sorter和updater，其中包括highlighter，都可以通过传入的选项来完成：

var typeahead = $("#mytypeahead").typeahead({
    matcher: function (item) {
        return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
    },
    sorter: function (items) {
        var beginswith = []
            , caseSensitive = []
            , caseInsensitive = []
            , item

        while (item = items.shift()) {
            if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
            else if (~item.name.indexOf(this.query)) caseSensitive.push(item)
            // NOTE: they assume, by default, that all results contain the text
            else caseInsensitive.push(item)
        }

        return beginswith.concat(caseSensitive, caseInsensitive)
    },
    updater: function(item) {
        // NOTE: this is called when the user picks the option, so you can also
        //  use item.url here
        return item.name
    }
});

sorter在您覆盖的source方法调用之后调用process，这会启动其他所有操作。

于 2013-04-18T02:26:10.017 回答