jQuery Wählen Sie im DataList-Tag verschachtelt aus - das ausgewählte Element kann nicht abgerufen werden

Question

Ich möchte eine AutoComplete-Funktion für ein Input-Tag implementieren.

Wenn ich anfange zu tippen, bekomme ich das Dropdown, dann wähle ich einen der Artikel aus. Wenn ich versuche, das ausgewählte Element zu erreichen, erhalte ich nur die erste Option aus der Optionsliste statt der von mir gewählten.

Dies ist, wie es aussieht:

<input id="chosenTxt" list="someList"> 
    <datalist id="someList"> 
    <select id="selectList"> 
     <option value="First" label="one" /> 
     <option value="Second" label="two" /> 
     <option value="Third" label="three" /> 
    </select> 
    </datalist> 
</input> 

Dann zum Beispiel I "Second" wählen und verwenden

$("#selectList option:selected").attr("label") 

I "Eins" zu bekommen.

FYI: Ich weiß, das ist in jQuery UI gebaut, aber ich will es nicht verwenden.

Answer 1

Sie müssen für die input Ereignis auf dem Eingangselement und iterieren die Optionen zu hören, zu überprüfen, ob der Eingang value zum value einer der Optionen entspricht.

Sie können auf die Optionen des Datenelementelements von der options-Eigenschaft auf dem Datenlisten zugreifen.

Hier ist ein Beispiel.

$('#chosenTxt').on('input', function() { 
 
    $that = $(this); 
 
    $.each($('#someList')[0].options, function(idx, opt) { 
 
    if($that.val() == opt.value) { 
 
     console.log(opt.label) 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="chosenTxt" list="someList"> 
 
<datalist id="someList"> 
 
<select id="selectList"> 
 
    <option value="First" label="one" /> 
 
    <option value="Second" label="two" /> 
 
    <option value="Third" label="three" /> 
 
</select> 
 
</datalist>