web-dev-qa-db-ja.com

HTML5データリストオプションをクリックしたときにアクションを実行する

<datalist>を使用しています

<datalist id="items"></datalist>

また、AJAX=を使用してリストを作成します

 function callServer (input) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //return the JSON object
            console.log(xmlhttp.responseText);
            var arr = JSON.parse(xmlhttp.responseText);
            var parentDiv = document.getElementById('items');
            parentDiv.innerHTML = "";
            //fill the options in the document
            for(var x = 0; x < arr.length; x++) {
                var option = document.createElement('option');
                option.value = arr[x][0];
                option.innerHTML = arr[x][1];
                //add each autocomplete option to the 'list'
                option.addEventListener("click", function() {
                  console.log("Test");
                });
                parentDiv.appendChild(option);
            };

        }
    }
    xmlhttp.open("GET", "incl/search.php?value="+input.value, true);
    xmlhttp.send();
}

しかし、たとえば「Ref F」と入力して「Ref flowers」という項目が表示された場合、クリックすると実行する必要があるなど、データリストの選択をクリックしてもアクションを実行できませんイベント。

これどうやってするの？

option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {
javascripthtml5dom-eventshtml-datalist
13
Hobbyist

この質問を掘り下げてすみませんが、同様の問題があり、解決策があります。

function onInput() {
    var val = document.getElementById("input").value;
    var opts = document.getElementById('dlist').childNodes;
    for (var i = 0; i < opts.length; i++) {
      if (opts[i].value === val) {
        // An item was selected from the list!
        // yourCallbackHere()
        alert(opts[i].value);
        break;
      }
    }
  }
<input type='text' oninput='onInput()' id='input' list='dlist' />

<datalist id='dlist'>
  <option value='Value1'>Text1</option>
  <option value='Value2'>Text2</option>
</datalist>

このソリューションは、Stephan Mullersソリューションから派生しています。動的に入力されたデータリストでも動作するはずです。

残念ながら、ユーザーがデータリストのアイテムをクリックしたか、Tabキーを押して選択したか、文字列全体を手で入力したかを判断する方法はありません。

23
chillichief

<datalist>要素で利用できるイベントがないため、inputのイベント（change、inputを見る以外に提案から選択する方法はありません。など）。また、ここで私の答えを参照してください： Enterキーを押してHTML 5データリストから要素が選択されたかどうかを判断します

リストから選択が選択されたかどうかを確認するには、各変更を利用可能なオプションと比較する必要があります。これは、ユーザーが手動で正確な値を入力したときにもイベントが発生することを意味し、これを停止する方法はありません。

document.querySelector('input[list="items"]').addEventListener('input', onInput);

function onInput(e) {
   var input = e.target,
       val = input.value;
       list = input.getAttribute('list'),
       options = document.getElementById(list).childNodes;

  for(var i = 0; i < options.length; i++) {
    if(options[i].innerText === val) {
      // An item was selected from the list!
      // yourCallbackHere()
      alert('item selected: ' + val);
      break;
    }
  }
}
<input list="items" type="text" />
<datalist id="items">
  <option>item 1</option>
  <option>item 2</option>
</datalist>
10
Stephan Muller

データリストはクリックリスナをサポートしておらず、OnInputは非常にコストが高く、変更がある場合はすべてのリストを毎回チェックします。

私が使っていたのは：

document.querySelector('#inputName').addEventListener("focusout", onInput);

FocusOutは、クライアントが入力テキストをクリックし、それ以外の場所をクリックするたびにトリガーされます。彼らがテキストをクリックした場合、他のどこかをクリックしたよりも、私は彼らが望む値を置いたと思います。

値が有効かどうかを確認するには、入力と同じ操作を行います。

   function onInput(e) {
        var val = document.querySelector('#inputName').value;
        options = document.getElementById('datalist').childNodes;
        for(var i = 0; i < options.length; i++) {
             if(options[i].innerText === val) {
                  console.log(val);
                  break;
             }
        }
    }
0
Dinidiniz