Javascript自动完成下拉函数混淆_Javascript_Html

Javascript自动完成下拉函数混淆

javascript html

Javascript自动完成下拉函数混淆,javascript,html,Javascript,Html,我正在使用W3C学校自动完成下拉列表 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 te

我正在使用W3C学校自动完成下拉列表

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

上述代码中的

指的是什么
为什么我们必须执行此.getElementsByTagName（“输入”）[0]

我得到：

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

在这一行。但是，我确实修改了上面的函数，并删除了

inp

参数上的addevent listener行。

正如您在下面的代码片段中看到的那样，

this

关键字将（在处理程序内部）引用到输入元素本身。代码的作者使用

this.getElementsByTagName（“输入”）[0]

（但不清楚为什么使用这种方式）可能是因为他想从其他输入复制值-但是您可以不使用它来设置该值（例如，直接使用

inp.value='some autocompleted vale'

，具体取决于您的情况）

inp.addEventListener（“输入”，函数（e）{
console.log（this.value，this）；
})

正如您在下面的代码片段中所看到的，

这个

关键字将（在处理程序内部）引用到输入元素本身。代码的作者使用

this.getElementsByTagName（“输入”）[0]

（但不清楚为什么使用这种方式）可能是因为他想从其他输入复制值-但是您可以不使用它来设置该值（例如，直接使用

inp.value='some autocompleted vale'

，具体取决于您的情况）

inp.addEventListener（“输入”，函数（e）{
console.log（this.value，this）；
})

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

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


A
阿富汗

我们在这个div元素上单击了listener，您可以在下面找到这段代码

this.getElementsByTagName

返回具有给定标记名的元素集合

code

this.getElementsByTagName（“输入”）[0]

正在

this

下搜索标记名为

input

的元素（当前div）

[0]

这是在返回集合中的第一个查找，因此它会查找值为

Afganistan

的输入元素。设置为文本框值。

如果您能看到代码，您会发现当用户开始在输入字段中键入时，会出现一个带有建议的列表。当用户点击任何一个建议选项时，该值被设置为文本框