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

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()的返回值是分配给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自动完成 - 如何传递值

2 个答案: