Javascript自动完成下拉功能混淆

Question

我正在使用这个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] + "'>";          });          a.appendChild(b);        }      }  });我对这个自动完成功能中的这行代码感到困惑：inp.value = this.getElementsByTagName("input")[0].value;this上面的代码指的是什么？我们为什么要这样做this.getElementsByTagName("input")[0]？我正进入（状态：未捕获的类型错误：无法读取未定义的属性“值”在这一行。然而，我确实修改了上面的函数并删除了inp参数上的添加事件侦听器行。

Answer 1

让我们一步一步地打破这个问题。

1. 您没有从 w3school 复制完整的脚本，请复制它，因为与上述代码相关的“addEventListener”、“addActive”等函数很少。

2. inp.value = this.getElementsByTagName("input")[0].value; 这里this指的是文档（window.document）

3. this.getElementsByTagName("input")[0] 如果我们不写它，我们将得到未定义，因为在这里您将搜索的项目分配给搜索输入框中的第一个元素。

Answer 2

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

所以在这里，在建议列表中，选项是这样生成的

<div>

   <strong>A</strong>

   fghanistan

   <input type="hidden" value="Afghanistan">

</div>

我们在这个 div 元素上点击了监听器，你可以在它下面找到这个代码

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

码this.getElementsByTagName("input")[0]与标签名称搜索元件input下this（这是当前的div）。

[0]这是在返回的集合中的第一个查找，因此它找到具有 value 的输入元素Afganistan。哪个被设置为文本框值。

Answer 3

正如您在下面的代码段中看到的，this关键字引用（内部处理程序）到输入元素本身。代码的作者使用this.getElementsByTagName("input")[0]（但不清楚为什么以这种方式）可能是因为他想从其他输入复制值 - 但是您可以在不使用它的情况下设置该值（例如直接方式inp.value='some autocompleted vale'，取决于您的情况）

inp.addEventListener("input", function(e) {

  console.log(this.value, this);

})

<input id="inp" placeholder='type here'>