Home>

I want to make a text box that can input text data directly. If there is a good way, please let me know.
(It is assumed that you can enter and select.)

Error message
I learned that there is "datalist" as one of the means, but this is not a problem in Chrome, but a problem has occurred in IE and FireFox It was.
Reference URL:
In Chrome, when "onchange" event is used, "Event occurs when selecting sect box (ideal movement)", whereas in IE and FireFox, after selecting the select box, the event is moved There was a difference.
Isn't there a way to make an event occur when you select a sect box in IE or FireFox like Chrome?
Or is there any other way to enter text data directly into the select box?
Applicable source code
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>datalist test</title>
<script>
function getSelectData (obj) {
    alert ("onchange event has occurred.");
}
</script>
</head>
<body>
<input list = "testList" name = "testName" onchange = "getSelectData (this)" />
<datalist>
    <option value = "test1">
    <option value = "test2">
    <option value = "test3">
    <option value = "test4">
</datalist>
</body>
</html>
Tried

I tried using Chrome, IE, and FireFox using the datalist tag.

  • Answer # 1

    Code

    datalist element + input event-JSFiddle

    <input list = "testList" id = "testId" name = "testName" />
    <datalist id = "testList">
      <option value = "test1">
      <option value = "test2">
      <option value = "test3">
      <option value = "test4">
    </datalist>
    <script>
    'use strcit';
    document.getElementById ('testId'). addEventListener ('input', function handleInput (event) {
      console.log (event.target.value);
    }, false);
    </script>
    Reference

    4.10.8 datalist element-HTML Standard Japanese translation

    input event-Can I use ...

    Re: satoutail-san

  • Answer # 2

    If you don't care about a text box, select a text box and an accompanying select box Just prepare it?

    <script>
    window.addEventListener ('DOMContentLoaded', function (e) {
      document.querySelector ('# fuga'). addEventListener ('change', function (e) {
        var t = e.target;
        document.querySelector ('# hoge'). value = t.value;
        t.selectedIndex = 0;
      });
    });
    </script>
    <form>
    <input type = "text" name = "hoge" id = "hoge" value = ""><br>
    <select id = "fuga">
    <option value = "">Select</option>
    <option value = "a">AAA</option>
    <option value = "b">BBB</option>
    <option value = "c">CCC</option>
    <option value = "d">DDD</option>
    </select><br>
    <input type = "submit" value = "go">
    </form>

  • Answer # 3

    If you are not particular about making your own, there is also this.
    selectize.js

  • Answer # 4

    Thank you all.
    While exploring in various ways, we were able to realize it by the third method of the following URL.
    http://www.shurey.com/js/labo/combobox.html

    We will also refer to the contents of your responses.

  • Answer # 5

    Thank you all.
    While exploring in various ways, we were able to realize it by the third method of the following URL.
    http://www.shurey.com/js/labo/combobox.html

    We will also refer to the contents of your responses.