So entfernen Sie wiederholte Tag-Zeichen in Bootstrap-Tagsseingang

Question

Ich versuche, Bootstrap Tagsinput mit Typeahead auf Bootstrap 3 zu verwenden, mit Bootstrap-3-Typeahead seit es scheint, die ursprüngliche typeahead wurde von Twitter aufgegeben.

Ich habe ein seltsames Verhalten, bei dem die Zeichen, die als tag akzeptiert werden, im Eingabefeld verbleiben. Dies erzeugt eine sehr merkwürdige Benutzererfahrung. In dem hier gezeigten Beispiel tippte ich 'Volunteer' (was einer der Werte in der Typehead war) und nachdem ich es als das erforderliche Tag ausgewählt hatte, blieben die Zeichen dort, teilweise sichtbar.

Dies ist mein Code. Ich verwende JQuery 1.12.3, Bootstrap 3.3.6 und TagsInput 0.6.1. Die letzten beiden wurden zusammen mit Bootstrap3-Typeahaed 3.1.0 in die Fußzeile geladen.

<input type="text" name="tags" id="tags" data-provide="typeahead" value=""/> 
    <script> 
    $(document).ready(function(){ 
     var type = ["Donor","Volunteer","Member","Resource","Follow-up","Friend"]; 
     var elt = $('#tags'); 
     elt.tagsinput({ 
      typeahead: { 
       source: type 
      } 
     }); 
    }); 
    </script> 

Habe ich etwas falsch, dass ich vermisse, dass dies verursacht?

Answer 1

Verwendung dieses

afterSelect: function(val) { this.$element.val(""); }, 

wie diese

$('#tag').tagsinput({ 
    typeahead: { 
    afterSelect: function(val) { this.$element.val(""); }, 
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] 
    }, 
    freeInput: false 
});