Question

我正在使用this W3C Schools自动完成下拉菜单。

function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
              b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });

我对自动完成功能中的这一行代码感到困惑：

inp.value = this.getElementsByTagName("input")[0].value;

以上代码中的this指的是什么？

为什么我们必须做this.getElementsByTagName("input")[0]？

我得到：

未捕获的TypeError：无法读取未定义的属性“值”

在此行中

。但是，我确实修改了上面的函数，并删除了inp参数上的add event listener行。

Answer 1

如下面的代码片段所示，this关键字引用（内部处理程序）输入元素本身。代码的作者使用this.getElementsByTagName("input")[0]（但是不清楚为什么要这样做）可能是因为他想从其他输入中复制值-但是您可以设置该值而不使用它（例如，直接使用{{1} }，具体取决于您的情况）

inp.value='some autocompleted vale'

inp.addEventListener("input", function(e) {
  console.log(this.value, this);
})

Answer 2

如果您可以看到代码，则可以发现，当用户开始在输入字段中键入内容时，会出现一个包含建议的列表。当用户单击任何建议的选项时，该值将被设置为文本框。

因此，在建议的列表中，这样生成选项

<div> <strong>A</strong> fghanistan <input type="hidden" value="Afghanistan"> </div>

，我们在此div元素上单击了侦听器，您可以在其中找到此代码

this.getElementsByTagName返回具有给定标签名称的元素的集合

代码this.getElementsByTagName("input")[0]在input（当前div）下搜索标签名称为this的元素。

[0]在返回的集合中很容易找到，因此它会找到值为Afganistan的输入元素。哪个将被设置为文本框值。

Answer 3

让我们逐步解决这个问题。

您没有从w3school复制完整的脚本，请复制它，因为与上述代码相关的功能很少，例如“ addEventListener”，“ addActive”等。
inp.value = this.getElementsByTagName("input")[0].value; 这里this引用到document（window.document）
this.getElementsByTagName("input")[0] 如果我们不编写它，则会得到未定义的信息，因为您是在此处将搜索到的项目分配给搜索输入框中的第一个元素。

JavaScript自动完成下拉功能混乱

3 个答案: