使用javascript，如何从自动完成列表中选择单击的项？

Question

我想用普通的Javascript来做这件事，而不是jQuery。我有一个脚本，它进行ajax调用，并根据keyup事件返回一个更改的项列表。因此，在将3个字符("eth")输入到搜索框后，可能会有这样的列表：

ethereum
ethereum-classic
ethos
ethlend
etherparty
etheroll
ethereum-blue
ethorse
ethbits
etheriya
ethereumcash
ethbet
ethereum-gold
ethereum-dark
ethereum-movie-venture
ethgas
etherdelta-token
ethereum-lite

现在，我想通过单击列表从列表中选择一个项目。到目前为止，守则是：

function loadDoc() {
        var string = document.getElementById("searchbox").value;
        var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
             document.getElementById("demo").style.display = "";
             document.getElementById("demo").innerHTML = "";
       obj = JSON.parse(this.responseText);
             for (i = 0; i < obj.length; i++) {
           document.getElementById("demo").innerHTML += "<div>" + obj[i].id + "</div>";
                        }
                        document.getElementById("demo").addEventListener("click", "div", function(){
                        var item = document.getElementById('demo').innerHTML;
                        //var item = this.getElementById("demo")[0].innerHTML;
               alert(item);
             });
      }
    };
    xhttp.open("POST", "/search?string=" + string, true);
    xhttp.send();

除了线条，一切都很好。

document.getElementById("demo").addEventListener("click", "div", function(){
                            var item = document.getElementById('demo').innerHTML;
                            //var item = this.getElementById("demo")[0].innerHTML;

我尝试了多种变体，我所取得的最好结果是点击事件捕获整个列表，我希望单击的项目是唯一返回的项目。用Javascript实现这一点的正确方法是什么？

谢谢!

Answer 1

错误地定义addEventListener时，回调函数必须是第二个参数。然后，可以使用event.target访问单击的项。下面是一个示例代码：

​

<div id="demo">demo</div>

<script>
  //assume you get all items in this obj
  var obj = [{id:"ethereum"}, {id:"ethereum-classic"}, {id:"ethos"}, {id:"ethlend"}, {id:"etherparty"}] //...

  document.getElementById("demo").innerHTML = "";

  for (i = 0; i < obj.length; i++) {
      document.getElementById("demo").innerHTML += "<div>" + obj[i].id + "</div>";
  }
  
  document.getElementById("demo").addEventListener("click", function(e){
      var item = e.target; //event.target
      alert(item.innerText); //get text of selected item (eg "ethereum")
  }); 
</script>

​