概要
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を使ってもとに戻すということをしてあげます。
必要ないことがほとんどだとは思いますが、ユーザーの用途に合わせて導入してみてください。