如何避免显示JSON字符串与自定义类型提前

How to avoid to display JSON string with custom typeahead

本文关键字：自定义 类型 字符串 何避免 显示 JSON      更新时间：2023-09-26

我已经覆盖了预输入方法以启用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>'
    });
}

有办法做这个简单的事情吗?

我不明白他们提供的方法，我们可以重写，如果我们不能。

提前输入x默认情况下不允许存储或加载JSON数据。看起来你试图在highlighter方法中使用JSON.parse来解决这个问题，但是你可以覆盖一些类似于不同问题的方法。

你可以在Typeahead中覆盖几乎任何方法，但是你必须欺骗render和select，你需要从使用attr('data-value' ...)更改为data('value' ...)，就像我在另一个答案中所做的那样。

除此之外，您必须更改主动接触JSON对象的每个方法:highlighter, matcher, sorter和updater。

因为您只想在突出显示中显示名称，因此可以通过稍微修改render来避免更改highlighter:

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之后被调用，这将启动其他所有内容。

相关文章：