点击HTML5数据列表选项时执行操作 [英] Perform action when clicking HTML5 datalist option

问题描述

我正在使用< datalist>

 < ; datalist id =items>< / datalist> 
  

并使用AJAX填充列表

  function callServer（input）{
 xmlhttp = new XMLHttpRequest（）; 
 xmlhttp.onreadystatechange = function（）{
 if（xmlhttp.readyState == 4&& xmlhttp.status == 200）{
 //返回JSON对象
的console.log（xmlhttp.responseText）; 
 var arr = JSON.parse（xmlhttp.responseText）; 
 var parentDiv = document.getElementById（'items'）; 
 parentDiv.innerHTML =; 
 //填写文件
中的选项（var x = 0; x< arr.length; x ++）{
 var option = document.createElement（'option'）; 
 option.value = arr [x] [0]; 
 option.innerHTML = arr [x] [1]; 
 //将每个自动完成选项添加到'list'
 option.addEventListener（click，function（）{
 console.log（Test）; 
}） ; 
 parentDiv.appendChild（选项）; 
}; 
 
 
 $ b 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（）{
  

解决方案

很抱歉挖掘这个问题，但我遇到了类似的问题并找到了解决方案，这对你也有用。

< 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解决方案。它应该与一个动态填充的datalist一起工作。

不幸的是，无法判断用户是否从数据列表中点击了一个项目，或者通过按下该标签来选择它键或键入整个字符串。

I'm using a <datalist>

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

And using AJAX to populate the list

 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();
}

However I can't get it to perform an action when I click on a selection in the datalist, for example if I type in "Ref F" and the item "Ref flowers" comes up, if I click on it I need to execute an event.

How can I do this?

option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {

解决方案

Sorry for digging up this question, but I've had a similar problem and have a solution, that should work for you, too.

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>

This solution is derived from Stephan Mullers solution. It should work with a dynamically populated datalist as well.

Unfortunaltely there is no way to tell whether the user clicked on an item from the datalist or selected it by pressing the tab-key or typed the whole string by hand.

这篇关于点击HTML5数据列表选项时执行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！