Correctly update the original version in bootstrap-typeahead.js

Question

In the next demo, after adding the value "Alaska", the source is updated so that autocomplete does not show the value of Alaska again.

var newSource = this.source .slice(0,pos) .concat(this.source.slice(pos+1)); this.source = newSource; 

In any case, if I remove Alaska from the text box, the Alaska value should be displayed again in the source.
Any hints on restoring the original data if the user deletes the data from the text field?

My idea is to access the `source option from

 $('.typeahead').on('change', function () { }) 

Any clues?

PS:
I use jquery and underline

Answer 1

You probably need to change your matcher function more matcher to test already selected states:

 var tabPresentStates = this.query.split(','), nbPresentStates = tabPresentStates.length; for(var iState = 0; iState < nbPresentStates; iState++) { if(item === tabPresentStates[iState].trim()) return false; } 

See fiddle .

Answer 2

Instead of changing the source, you can use the sorter to exclude the values ​​that are already selected.

http://jsfiddle.net/BwDmM/71/

PS I will probably include your code in the next version of Jasny extended Bootstrap http://jasny.github.com/bootstrap :)

 !function(source) { function extractor(query) { var result = /([^,]+)$/.exec(query); if(result && result[1]) return result[1].trim(); return ''; } $('.typeahead').typeahead({ source: source, updater: function(item) { return this.$element.val().replace(/[^,]*$/,'')+item+','; }, matcher: function (item) { var tquery = extractor(this.query); if(!tquery) return false; return ~item.toLowerCase().indexOf(tquery) }, highlighter: function (item) { var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '<strong>' + match + '</strong>' }) }, sorter: function(items) { var beginswith = [] , caseSensitive = [] , caseInsensitive = [] , existing = $.each(this.$element.val().split(','), function(i, val) { return val.trim() }) , item while (item = items.shift()) { if ($.inArray(item, existing) >= 0) continue; if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item) else if (~item.indexOf(this.query)) caseSensitive.push(item) else caseInsensitive.push(item) } return beginswith.concat(caseSensitive, caseInsensitive) } }); }(["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]); 

Answer 3

The @SamuelCaillerie approach for using matcher is matcher - it's just using your highlight function. So:

  updater: function(item) { return this.$element.val().replace(/[^,]*$/,'')+item+','; }, matcher: function (item) { var previouslySelected = (this.query.indexOf(item) != -1); var tquery = (previouslySelected ? "" : extractor(this.query)); if(!tquery) return false; return ~item.toLowerCase().indexOf(tquery) },