(HTML5)datalist JQueryでお手軽取得(value&label)

HTML5から使えるdatalistをいまさらながら使ってみる

##HTML

<input type="search" name="sample" autocomplete="on" list="list">
<datalist id="list">
    <option value="apple" label="りんご">
    <option value="lemon" label="れもん">
    <option value="banana" label="ばなな">
</datalist>

autocompleteはinput要素の入力候補を簡単に表示できます。
list属性とdatalistのid属性は同じもの指定します。

こんな感じの見た目になると思います。

##Jquery/Js

<script>
    $('input[name=sample]').on('change', function () {
        console.log($(this).val()); //value値
        console.log($("#list option[value='" + $(this).val() + "']").prop('label')) //label値
    });
</script>

value値は、val関数を使って取得できます。
labelはdatalist内に記述されているため、今回は、そのvalue値を持っているoptionのlabelを取得という形にしております。

console.logでこのようにでれば、完了です。(apple-リンゴ選択)