入力可能なセレクトボックスを作りたいです。

前提・実現したいこと

セレクトボックスに直接テキストデータの入力が可能なものを作りたいのですが、良い方法がありましたら教えてください。
（入力もできるし、選択もできるイメージを想定しております。）

発生している問題・エラーメッセージ

手段の一つとして、「datalist」というのがあることを知ったのですが、これだと、Chromeでは問題ないのですが、IEやFireFoxでは問題が発生してしまいました。
参考URL:

Chromeでは「onchange」イベントを使った場合、「セクトボックスを選択したタイミングでイベントが発生する（理想の動き）」のに対して、IEとFireFoxでは「セレクトボックスを選択後、フォーカスを移動したらイベントが発生する」という違いがありました。

Chromeのように、IE、FireFoxで「セクトボックスを選択したタイミングでイベントが発生する」する方法はないものでしょうか？
あるいは、別の方法で、セレクトボックスに直接テキストデータを入力できる方法はないでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>datalistのテスト</title>
6<script>
7function getSelectData(obj){
8    alert("onchangeイベントが発生しました。");
9}
10</script>
11</head>
12<body>
13<input list="testList" id="testId" name="testName" onchange="getSelectData(this)" />
14
15<datalist id="testList">
16    <option value="test1">
17    <option value="test2">
18    <option value="test3">
19    <option value="test4">
20</datalist>
21</body>
22</html>

試したこと

datalistタグを利用して、Chrome、IE、FireFoxで試しました。

行動規範の内容に同意します

回答5件

コード

datalist要素 + input event - JSFiddle

HTML
1<input list="testList" id="testId" name="testName" />
2<datalist id="testList">
3  <option value="test1">
4  <option value="test2">
5  <option value="test3">
6  <option value="test4">
7</datalist>
8<script>
9'use strcit';
10document.getElementById('testId').addEventListener('input', function handleInput (event) {
11  console.log(event.target.value);
12}, false);
13</script>

参考

Re: satoutail さん

投稿2018/08/27 12:36

編集2018/08/27 23:15

think49

総合スコア18119

自作することにこだわりがないのならこういうものもあります。
selectize.js

投稿2018/08/27 13:19

spookybird

総合スコア1803

別にこだわりがなければテキストボックスと付随するセレクトボックスを
用意するだけでは？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#fuga').addEventListener('change',function(e){
4    var t=e.target;
5    document.querySelector('#hoge').value=t.value;
6    t.selectedIndex=0;
7  });
8});
9</script>
10<form>
11<input type="text" name="hoge" id="hoge" value=""><br>
12<select id="fuga">
13<option value="">選択する</option>
14<option value="a">AAA</option>
15<option value="b">BBB</option>
16<option value="c">CCC</option>
17<option value="d">DDD</option>
18</select><br>
19<input type="submit" value="go">
20</form>
21