Bootstrap 3 typeahead.js - query by part of typeahead val

Question

I'm trying to call my remote url with last part of input value. I would like to do something like this:

    $('#typeahead').typeahead({
    remote: {
        url: '/ajax/tags/get/?name=%QUERY',
        replace: function (url, query) {
            var last = query.split(',');
            last = $.trim(last[last.length-1]);
            return url.replace('%QUERY', last);
        }
    },
    limit : 10
});

and when dropdown item selected,

enter image description here

add new value to end of line

enter image description here

Any idea how to make that work?

You may want to consider that you also need to first get all the comma separated values in your input and remove them from your resulting data set.. prior to using the last input value to show the suggestions list, unless your planning on allowing duplicates. You will also probably have to disable the autocomplete/hint? since I guess that will affect your input. — Pricey, Oct 24 '13 at 13:06

score 1 · Accepted Answer · edited May 23 '17 at 11:53

For Bootstrap 3 you can use Bootstrap-3-Typeahead.

You will have to overwrite the updater and matcher functions. For the matcher function you can use the code from your replace function as follows:

matcher: function (item) {
        var last = this.query.split(',');
        this.query = $.trim(last[last.length-1]);

        if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase());
}

Use the following code for your update:

updater: function (item) {
      return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ',';
    }

(match last occurrence from: JavaScript: replace last occurrence of text in a string )

Complete example:

$('.typeahead').typeahead (
{
items: 4,
source: function (query, process) {
    states = [];
    map = {};


    var data = [
        {"stateCode": "CA", "stateName": "California"},
        {"stateCode": "AZ", "stateName": "Arizona"},
        {"stateCode": "NY", "stateName": "New York"},
        {"stateCode": "NV", "stateName": "Nevada"},
        {"stateCode": "OH", "stateName": "Ohio"}
    ];

    $.each(data, function (i, state) {
        map[state.stateName] = state;
        states.push(state.stateName);
    });

    process(states);

}

  , updater: function (item) {
      return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ',';
    }
    , matcher: function (item) {
        var last = this.query.split(',');
        this.query = $.trim(last[last.length-1]);

        if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase());
    }
    }

);

score 0 · Answer 2 · answered Aug 29 '13 at 06:35

0

Assuming that "query with the last part" works for you, you can use filter: function(response) {...} to populate and return an array of datums that have appropriate value and title to do what you want.

answered Aug 29 '13 at 06:35

Nitzan Shaked

13,460
5
45
54

Bootstrap 3 typeahead.js - query by part of typeahead val

2 Answers2

Linked