如何避免使用自定义预先输入显示 JSON 字符串 [英] How to avoid to display JSON string with custom typeahead

问题描述

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

I have overridden the typeahead methods to enable AJAX calls (getting JSON object results since I need a field name to display, and a field url to hide).

但这还不够，当用户进行一些研究时一切正常，但是如果您获取结果，或者只是按 TAB，则输入中会出现 JSON 字符串，某些内容喜欢:

But it's not enough, everything works well when the user tape some research, but if you pick up a result, or just press TAB, there is the JSON string which appears in the input, something like:

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

我只想在输入中显示字段 name，就像我在 dropbox 中所做的那样，通过覆盖 highlighter 方法，但是我不知道有没有可能.

I just want to display the field name in the input, like i do in the dropbox by overriding the highlighter method, but i don't know if it's possible.

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

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

Is there a way to do this simple thing?

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

I couldn't understand they provide methods we can override if we can't...

推荐答案

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

Typeahead 2.x does not allow the storage or loading of JSON data by default. It looks like you're trying to work around that in your highlighter method with JSON.parse, but you could override a few methods similar to a different question.

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

You can override almost any method within Typeahead, but you have to cheat to do it to the render and select, which you need to change from using attr('data-value' ...) to data('value' ...) as I did in the other answer.

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

Beyond that, you must change every single method that actively touches your JSON object: highlighter, matcher, sorter, and updater.

因为您只想在突出显示中显示名称，所以您可以通过稍微修改上一个问题的 render 来避免必须更改 highlighter:

Because you only want to show the name in the highlight, you can avoid having to change highlighter by modifying render a little from the previous question:

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，都可以通过传入的选项来完成:

Ignoring select, which I show in the other answer, you would still need to override matcher, sorter, and updater, which, including highlighter, can all be done through the passed in options:

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 之后被调用，这会启动其他一切.

sorter is called after your overridden source method calls process, which kicks off everything else.

这篇关于如何避免使用自定义预先输入显示 JSON 字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！