Wie speichere ich typeahead.js Ergebnisse nur, wenn der Benutzer ein Ergebnis ausgewählt hat?

Question

Frage Ich möchte den Wert des Status abrufen, sobald der Benutzer einen Status aus der Liste auswählt. Ich habe bisher folgend: Allerdings ist das Ergebnis jedes Mal, speichert einen Benutzer in einem Zeichen und nicht, wenn der Benutzer einen Wert ausgewählt hat:

$('form').on("change", ".state", function(e){ 
    var $contextualDiv = $(e.target).closest('div'); 
    var $state = $contextualDiv.find('.state'); 
    $state.each(function(i,v){ 
     console.log($(v).val()); 
    }); 
    ... 

es so scheint, ist auch nicht der richtige Weg, um Zugang zu das ausgewählte durch das Objekt. Basierend auf der Dokumentation sollte ich nur in der Lage sein, es durch die Zeile zu greifen:

var $ state = $ ('. State'). Typeahead ('val');

Dies ist mein aktueller Code:

html:

<form> 
    <div> 
     <input class="state tt-input"> 
    </div> 
    ... 
</form> 

jquery/typeahead.js Umsetzung:

<script> 
    $(document).ready(function() { 

    var bh = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: { 
      url: '/get_states/', 
      prefetch: function(settings) { 
      settings.type = "GET"; 
      return settings; 
      }, 
     }, 
     }); 

    $('.state').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     name: 'states', 
     source: bh, 
    }); 

    var substringMatcher = function(strs) { 
     return function findMatches(q, cb) { 
     var matches, substringRegex; 

     // an array that will be populated with substring matches 
     matches = []; 

     // regex used to determine if a string contains the substring `q` 
     substrRegex = new RegExp(q, 'i'); 

     // iterate through the pool of strings and for any string that 
     // contains the substring `q`, add it to the `matches` array 
     $.each(strs, function(i, str) { 
     if (substrRegex.test(str)) { 
      matches.push(str); 
     } 
     }); 

     cb(matches); 
    }; 
    }; 

Bitte ersetzen Sie die Variable 'Airline mit 'Staat' in der Bilder.

Answer 1

Die typeahead Bibliothek löst ein Ereignis aus, wenn der Benutzer eine Option auswählt. Der Name dieses Ereignisses lautet typeahead:select. Hier ist das Beispiel in den documentation vorgesehen:

$('.typeahead').bind('typeahead:select', function(ev, suggestion) { 
    console.log('Selection: ' + suggestion); 
}); 

Sie diese anpassen kann für Ihre Implementierung zu arbeiten.

Ich denke, das funktioniert:

$('form input.state').on("typeahead:select", function(e, suggestion) { 
    console.log("Selection: ", suggestion); 
    // OR 
    // console.log("Selection", $(this).typeahead("val")); 
});