Geek asks and answers

Avoiding displaying a JSON string with a custom head type

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

But this is not enough, everything works well when the user views some kind of research, but if you get the result or just click TAB, a JSON line will appear in the input line, something like:

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

I just want to display the nameinput field as I do in dropboxby overriding the method highlighter, but I don't know if this is 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 any way to do this simple thing?

I could not understand that they provide methods that we can override if we cannot ...

+1
1

Typeahead 2.x JSON . , highlighter JSON.parse, , .

Typeahead, , render 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, .

+1

More articles:


All Articles