1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

datalistで選択後にも候補を全て表示させる

Posted at

概要

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を使ってもとに戻すということをしてあげます。

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?