2017-06-11 1 views
1

Ich habe eine (dynamisch) Liste der Auswahlmöglichkeiten in einem <input> Feld:Gibt es ein Ereignis, das mit der Wahl eines Datengebers verbunden ist? <option>?

<input list="choices"> 
 
<datalist id="choices"> 
 
<option>one</option> 
 
<option>two</option> 
 
</datalist>

Gibt es ein Ereignis direkt nach der Wahl der <option> gefeuert gemacht wird? (die ich gerne in Vue.js finden/verwenden würde, wenn das wichtig ist). Dies wäre, wenn die linke Maustaste in dem Szenario unten geklickt wird:

enter image description here

+0

Sie können .change jquery jedes Mal auslösen, wenn der Optionswert geändert wird – ISHIDA

+0

@ISHIDA: Sie meinen ** nachdem die Option ausgewählt wurde **, nicht ** nach jedem Tastendruck ** (und daher eine Änderung des Inhalts der Eingabe) Feld)? Das wäre großartig. – WoJ

+0

Ja Ich habe ein Beispiel in den Antworten zur Verfügung gestellt – ISHIDA

Antwort

-1

bereits. es wird geprüft, ob der Wert im Feld Eingang vorhanden und Alarm ausgelöst wird, wenn Sie eine Option auswählen, wie Sie

<input list="choices" id="searchbox"> 
<datalist id="choices"> 
<option id="one">one</option> 
<option>two</option> 
</datalist> 


$("#searchbox").bind('input', function() { 
    if(checkExists($('#searchbox').val()) === true){ 
     alert('item selected') 
    } 
}); 

function checkExists(inputValue) { 
    console.log(inputValue); 

    var x = document.getElementById("choices"); 
    var i; 
    var flag; 
    for (i = 0; i < x.options.length; i++) { 
     if(inputValue == x.options[i].value){ 
      flag = true; 
     } 
    } 
    return flag; 
} 
+0

Dies ist nicht das, was ich suche, bitte siehe https://jsfiddle.net/WoJWoJ/pnfa10gk/ - der Alarm wird nach jeder Änderung des Eingabefeldes ausgelöst - genau das, was ich möchten vermeiden, dass – WoJ

+0

Sie mousedown Ereignis bei der Auswahl von Optionen erfassen möchten? – ISHIDA

+0

Das könnte eine Option sein - ich hatte auf ein Ereignis gehofft, das ausgelöst wird, wenn eine Option von der gewählt wird (angeklickt) - in diesem Moment würde ich das Suchfeld aufräumen und die gewählte Option verwenden – WoJ

0

Es ist wie Optionen sieht in Datalist tigger keine Veranstaltung angefordert haben, so müssen Sie Ihre eigene codieren Lösung.

konnte ich etwas ähnliches Feuer Ereignisse mit Optionen in Datalist tun, können Sie eine Lösung mit diesem

<input list="choices" @input="checkInput" > 
<datalist id="choices"> 
<option>one</option> 
<option>two</option> 
</datalist> 
Start versuchen @input im Element

Zum Beispiel in Ihrem Code verwenden

In der mit @input verwendeten Methode können Sie die Änderungen im Eingabewert überprüfen.

checkInput(e){ 
    var inputValue = e.target.value; 
    //Your code 
    }, 

Zum Beispiel können Sie überprüfen, ob der Eingangswert, nach Klick in eine Option Ihrer datalyst, eine gültige Option ist, und nach, dass die Bedingungen erfüllt, die Sie eine andere Methode starten kann oder was auch immer Sie wollen.

Verwandte Themen