Geek asks and answers

Handling Objects with Twitter Bootstrap Typeahead

I am using the Bootstrap Typeahead plugin as follows:

$('#Organisation').typeahead({
            source: function (query, process) {
                return $.get(AppURL + 'Organisations/Manage/SearchByName/',
                {
                    term: query
                },
                function (data) {
                    var results = [];
                    var fullResults = [];
                    $.each(data, function (index, item) {
                        results.push(item.label);
                        fullResults.push({
                            id: item.ID,
                            label: item.label
                        });
                    });

                    return process(results);


                });
            },
            updater: function (selection) {
                $('#OrganisationID').val(selection);
            }
        });

I have two arrays returned, this is because Typeahead ONLY wants a list of strings instead of an object. The second array contains both a label and an identifier.

As soon as the user selects an item from the list, I need to get the identifier from this selection, and then use it to insert into the hidden field. But the choice will be just a name, since the identifier cannot be passed through Typeahead.

Any ideas on how I can solve this?

An example of two returned arrays:

Results: ["Organisation 1","Organisation 2"]

fullResults: [{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]

+5
source share
4 answers

this HowTo. , , ajax.

, typeahead.

+5

JSON Bootstrap Typeahead (2.x), . . questions , , .

var typeahead = control.typeahead({ /* ... */ }).data('typeahead');

// manually override select and render
//  (change attr('data-value' ...) to data('value' ...))
//  otherwise both functions are exact copies
typeahead.select = function() {
    var val = this.$menu.find('.active').data('value')
    this.$element.val(this.updater(val)).change()
    return this.hide()
};
typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

, highlighter, matcher, sorter updater, , typeahead, item (s) JSON.

item s updater, JSON:

updater: function (item) {
    someGlobalValue = item.id;

    // must return a normal string; sets the textbox value
    return item.name;
}

, , "" , Typeahead, . sorter .

+3

...

, , , ...

JSON

[
{"id": 1, "title": "Foo foo foo"},
{"id": 2, "title": "Bar bar bar"},
...
]

...

$(function() {
    $.get("path/to/data.json", function(data){
          $(".typeahead").typeahead({
              "source": data,
              "displayText": function(item){
                  // OMG ugly !!! :p
                  if (item.id == undefined) return item;
                  return item.title + ' (' + item.id + ')';  
              },
              "updater": function(item) {
                  return item.id;
              }});
    }, 'json');
});

, , ...

done! ugly but made ...

Tested with https://github.com/bassjobsen/Bootstrap-3-Typeahead

+1
source

Consider rewriting the functions "matcher", "sorter", "updater" and "highlighter", as described in fooobar.com/questions/407118 / ...

This is really a trick so you can manipulate objects using Bootstrap Typeahead (2.x)

0
source

More articles:


All Articles