使用 Javascript 自动完成 - 值是如何传递的

Question

我正在学习使用 Javascript 进行自动完成。

这是我正在使用的示例代码，它有效，我需要了解它的流程。

当您在输入标签中输入 JO 时，会显示 'john doe' 的选项

// variables
var input = document.querySelector('#autocomplete-input');
var people = ['john doe', 'maria', 'paul', 'george', 'jimmy'];
var results;

// functions
function autocomplete(val) {
  var people_return = [];

  for (i = 0; i < people.length; i++) {
     if (val === people[i].slice(0, val.length)) {
      people_return.push(people[i]);

    }
  }

  return people_return;
}

// events
input.onkeyup = function(e) {
  input_val = this.value; 

  if (input_val.length > 0) {
    var people_to_show = [];
    autocomplete_results = document.getElementById("autocomplete-results");
    autocomplete_results.innerHTML = '';
    people_to_show = autocomplete(input_val); 
    
    for (i = 0; i < people_to_show.length; i++) {
      autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';

    }
    autocomplete_results.style.display = 'block';
  } else {
    people_to_show = [];
    autocomplete_results.innerHTML = '';
  }
}

<div id="autocomplete-container">  
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input"></input>
  <ul id="autocomplete-results">
  </ul>
</div>

我的问题是：（这是为了了解流程 - 我是 Javascript 的新手）

input_val 未声明为变量，但仍获取值 - 如何
第一个 onkeyup 值必须转到自动完成功能然后返回到符合条件的数组。 - 这是怎么做到的

我在流程中附上了一张图片 - 红色的备注是我对流程的理解，蓝色的是我正在寻找的答案。

Answer 1

var results; 不用了可以删除
e in function(e) 是当前事件的对象
input_val = this.value; 是的，你可以在它前面写一个变量。
赋予该功能价值的代码是这一行people_to_show = autocomplete(input_val);。这里我们调用了自动完成函数并在 return 语句给出存储到 people_to_show 变量的数组之后传递值。

流程是这样的

Answer 2

如果你给一个没有声明的变量赋值，它会自动成为一个全局变量。

至于自动完成功能，它通过以下方式调用：

people_to_show = autocomplete(input_val);

来自 autocomplete() 的 return 值是分配给 people_to_show

的值

input_val 来自 this.value，其中 this 是输入元素。传递给函数的 e 没有被代码使用，尽管您可以像 e.target.value 那样使用它。由于无论如何都会传递事件，因此您可以使用 event.target.value。查看我删除 e.

的代码

results 未在您的代码中使用

// variables
var input = document.querySelector('#autocomplete-input');
var people = ['john doe', 'maria', 'paul', 'george', 'jimmy'];
var results;

// functions
function autocomplete(val) {
  var people_return = [];

  for (i = 0; i < people.length; i++) {
     if (val === people[i].slice(0, val.length)) {
      people_return.push(people[i]);

    }
  }

  return people_return;
}

// events
input.onkeyup = function() {
  input_val = event.target.value; 

  if (input_val.length > 0) {
    var people_to_show = [];
    autocomplete_results = document.getElementById("autocomplete-results");
    autocomplete_results.innerHTML = '';
    people_to_show = autocomplete(input_val); 
    
    for (i = 0; i < people_to_show.length; i++) {
      autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';

    }
    autocomplete_results.style.display = 'block';
  } else {
    people_to_show = [];
    autocomplete_results.innerHTML = '';
  }
}

<div id="autocomplete-container">  
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input"></input>
  <ul id="autocomplete-results">
  </ul>
</div>

使用 Javascript 自动完成 - 值是如何传递的

Autocomplete using Javascript - How is the value passed

javascript

autocomplete

return-value

onkeyup