Question

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

但这还不够，当用户录制一些研究时，一切都运行良好，但是如果你拿起一个结果，或者只是按TAB，输入中会出现一个JSON字符串，如：< / p>

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

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

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

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

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

Answer 1

Typeahead 2.x默认情况下不允许存储或加载JSON数据。您似乎试图使用highlighter在JSON.parse方法中解决此问题，但您可以覆盖一些类似于different question的方法。

您可以覆盖Typeahead中的几乎所有方法，但您必须作弊才能对render和select进行操作，您需要将其从使用attr('data-value' ...)更改为{{1正如我在另一个答案中所做的那样。

除此之外，您必须更改主动触及JSON对象的每个方法：data('value' ...)，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，这会启动其他所有内容。

如何避免使用自定义typeahead显示JSON字符串

1 个答案: