jQuery DataListタグにネストして選択しました - 選択したアイテムを取得できません

Question

Inputタグのオートコンプリート機能を実装するのは難しいです。

入力を開始すると、ドロップダウンが表示され、次にアイテムの1つが選択されます。 選択したアイテムに到達しようとしているとき、私は選択したアイテムのリストではなく、オプションリストから最初のオプションを取得します。

これは、次のようになります。たとえば次に

<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> 

私は、 "第二" を選択して、私は "1" を取得

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

を使用しています。

FYI：これはjQuery UIに組み込まれていることを知っていますが、私はそれを使用したくありません。

Answer 1

あなたは、input要素のinputイベントをリッスンし、 以上のオプションを繰り返す、入力valueは、オプションのいずれかのvalueに等しいかどうかをチェックする必要があります。

datalist要素のオプションには、データリストのoptionsプロパティからアクセスできます。

ここは例です。

$('#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>