Bootstrap typeahead ajax result format - Example

Question

I am using Bootstrap typeahead with an ajax function, and want to know what is the correct Json result format, to return an Id and a descripcion. I need the Id to bind the typeahead selected element with a mvc3 model.

This is the code:

    [Html]

    <input id="myTypeahead" class='ajax-typeahead' type="text" data-link="myUrl" data-provide="typeahead" />


    [Javascript]

    $('#myTypeahead').typeahead({
        source: function (query, process) {
            return $.ajax({
                url: $('#myTypeahead').data('link'),
                type: 'post',
                data: { query: query },
                dataType: 'json',
                success: function (jsonResult) {
                    return typeof jsonResult == 'undefined' ? false : process(jsonResult);
                }
            });
        }
    });



This works properly when I return a simple list of strings, for example:
{item1, item2, item3}

But I want to return a list with Id, for example:
{
 {Id: 1, value: item1},
 {Id: 2, value: item2},
 {Id: 3, value: item3}
}

How to process this result in the ajax "success: function()"?

That is very easy with jquery Autocomplete, because I can return a Json Object list.

[jquery Autocomplete process data example]
...            
success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.Id, value: item.Value, id: item.Id, data: item };
                })
...

But that doesn't work with boostrap Typeahead.

Can anyone help me?

Thanks.

Have you tried converting the return values as an `Array` instead? `var list = [{Id: 1, value: item1},{Id: 2, value: item2},{Id: 3, value: item3}];` — Dennis Rongo, Feb 15 '13 at 19:11
yes, I have no problem with that. My problem is how to bind the Id with the html control. Process(data) function only accept an array of string, not an array of objects — Gonzalo, Feb 15 '13 at 19:18

score 41 · Accepted Answer · edited Jan 29 '14 at 08:58

I try for two days and finally I could it working. Bootstrap Typeahead doesn't support an array of objects as a result by default, only an array of string. Because "matcher", "sorter", "updater" and "highlighter" functions expect strings as parameter.

Instead, "Bootstrap" supports customizable "matcher", "sorter", "updater" and "highlighter" functions. So we can rewrite those functions in Typeahead options.

II used Json format, and bound the Id to a hidden html input.

The code:

$('#myTypeahead').typeahead({
    source: function (query, process) {
        return $.ajax({
            url: $('#myTypeahead').data('link'),
            type: 'post',
            data: { query: query },
            dataType: 'json',
            success: function (result) {

                var resultList = result.map(function (item) {
                    var aItem = { id: item.Id, name: item.Name };
                    return JSON.stringify(aItem);
                });

                return process(resultList);

            }
        });
    },

matcher: function (obj) {
        var item = JSON.parse(obj);
        return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
    },

    sorter: function (items) {          
       var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
        while (aItem = items.shift()) {
            var item = JSON.parse(aItem);
            if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
            else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
            else caseInsensitive.push(JSON.stringify(item));
        }

        return beginswith.concat(caseSensitive, caseInsensitive)

    },


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

    updater: function (obj) {
        var item = JSON.parse(obj);
        $('#IdControl').attr('value', item.id);
        return item.name;
    }
});

Thank you, thank you! Man, I've been looking everywhere for a workable solution to get the bootstrap 2.3.2 typeahead method to read a dataset and update different fields on the page based on the selected item. In case I forgot to mention it - thank you! — MichaelJTaylor, Jun 05 '14 at 08:58

score 1 · Answer 2 · answered Sep 21 '15 at 14:38

Note: I saw @EralpB`s comment "Is this still the best way to accomplish this task?"

Yes, @Gonzalo solution works, but it seems strange (like crutch,especially after using jQuery-Autocomplete) - it should work "from box".Better is to use this - Bootstrap-3-Typeahead. It supports an array of objects as result: format - [{id: .. ,name:...},...,{id: .. ,name:...}]. Example for OP`s issue:

....
 source: function (query, process) {
    return $.ajax({
        ......
        success: function (result) {            
            var resultList = [];

            $.map(result,function (Id,value) {
                var aItem = { id: Id, name: value};
                resultList.push(aItem);
            });

            return process(resultList);
        }
    });
  },

Bootstrap typeahead ajax result format - Example

2 Answers2

Linked