概要

HTMLの< datalist >要素は、選択後に候補が選択したものしか表示されなくなります。
再度、全ての候補を表示させるには、選択した候補を削除する必要があります。

今回はjqueryを使って、選択後も全ての候補が表示されるようにします。

ソースコード

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="lang">プログラミング言語</label>
    <input list="lang-list" id="lang" name="lang" />

    <datalist id="lang-list">
        <option value="python">
        <option value="php">
        <option value="Go">
    </datalist>
</body>
</html>

test.js


var temp = "";
//候補が表示される前に入力値を削除する
$("#lang").mousedown(function() {
    //tempに選択されている文字列を入れる
    temp = $("#lang").val();
    //入力を削除する
    $("#lang").val("");
});
//候補が表示された後に入力値を入れ直す
$("#lang").click(function () {
    if(temp !== ""){
        $("#lang").val(temp);
    }
});

解説

< datalist >はクリックされた時に入力値があると候補が出なくなるため、それより前に要素を消してあげる必要があります。そこで.mousedownを使ってクリックより前に削除をし、.clickを使ってもとに戻すということをしてあげます。

必要ないことがほとんどだとは思いますが、ユーザーの用途に合わせて導入してみてください。