Eloquent JS 练习（第 18 章 Q. 2）答案

【问题标题】：Eloquent JS Exercise (Ch.18 Q. 2)Eloquent JS 练习（第 18 章 Q. 2）
【发布时间】：2015-10-02 08:18:09
【问题描述】：

我希望有人能帮我找出我做错了什么...在 Eloquent JS 书中有一个练习要求您编写一些代码，可以在用户键入时向他们建议单词/值...我写的代码如下。发生的情况是，当我运行代码时，div 元素的文本内容更改为错误的值。具体来说，它被设置为数组“terms”内所有元素的字符串。我真的不明白为什么会这样！

    <input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>

<script>
  // Builds up an array with global variable names, like
  // 'alert', 'document', and 'scrollTo'
  var terms = [];
  for (var name in window)
    terms.push(name);
  var input = document.querySelector('input');
  var div = document.querySelector('#suggestions');

input.addEventListener("input", function(event){
  var last = input.value.lastIndexOf(" ")+1;
  var check = input.value.slice(last);
  var reg = new RegExp(check);
  for (var i=0; i<terms.length; i++) {
    if (reg.test(terms[i])) {
      var text = document.createTextNode(terms[i]);
      div.appendChild(text)};
  };
})

</script>

【问题讨论】：

您需要描述问题所在。当你运行代码时会发生什么，你期望什么？您是否在控制台中看到错误消息？
一开始我认为input.addEventListener("input" 应该类似于input.addEventListener("keyup"。
当我尝试测试代码时，div 元素内的文本由于某种原因更改为 terms 数组内所有元素的字符串，即这是它设置的值（第一个至少一点）= locationexternal__sandbox__setIntervalsetIntervalrequestAnimationFramedivacacheslocalStoragesessionStoragewebkitStorageInfoappl
我希望上面的评论能让它更清楚一点，非常感谢你的快速回复顺便说一句！
安迪，谢谢你的建议。我使用输入的原因是因为作者建议按照他为练习提供的提示进行输入。另外，以防万一这很有用，这里是带有练习的页面的链接eloquentjavascript.net/18_forms.html

标签： javascript html autocomplete

【解决方案1】：

我猜你忘记在每次更改输入之前清理 div。我还在每个单词后添加了一个空格，以使输出更具可读性。

// Builds up an array with global variable names, like
// 'alert', 'document', and 'scrollTo'
var terms = [];
for (var name in window)
    terms.push(name);
var input = document.querySelector('input');
var div = document.querySelector('#suggestions');

input.addEventListener("input", function(event){
  div.innerHTML = '';
  var last = input.value.lastIndexOf(" ")+1;
  var check = input.value.slice(last);
  var reg = new RegExp(check);
  for (var i=0; i<terms.length; i++) {
    if (reg.test(terms[i])) {
      var text = document.createTextNode(terms[i] + ' ');
      div.appendChild(text)};
  };
})

<input type="text" id="field">
<div id="suggestions" style="cursor: pointer"></div>

使用此代码，您将显示包含输入中最后一个单词的窗口对象的属性名称。尝试编写“窗口位置文档”。是你要找的吗？

【讨论】：

我已将您建议的更改添加到我的代码中。然而，当我在输入框中输入任何字母时，div 元素的文本内容会更改为以下内容（这只是它的一个 sn-p，因为整个文本很长）= location external __sandbox __setInterval setInterval requestAnimationFrame diva caches localStorage sessionStorage webkitStorageInfo applicationCache
您也可以直接在我的答案中测试代码。如果你在输入中输入字符串“loc”，你会有一些建议（比如我的浏览器的“location localStorage locationbar”）。阅读您的问题，这种行为对我来说似乎是正确的。你期望什么输出？
啊是的！现在可以了。我通过输入一个字母来测试它，这显然将 div 设置为大量属性名称，使它看起来像是发生了错误......感谢您的帮助！ :)