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

i'm trying call remote url last part of input value. 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,

add new value end of line

any idea how make work?

for bootstrap 3 can use bootstrap-3-typeahead.

you have overwrite updater , matcher functions. matcher function can use code replace function 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 following code 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 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());     }     }  );