Почему onclick работает только при двойном щелчке?

Question

Я искал примеры автозаполнения в чистом javascript, и я нашел довольно хороший пример на JSFiddle, но в нем есть ошибка, которую я пытаюсь понять, как исправить.

автозаполнение только автоматически заполняет текст, если вы дважды щелкните абзац

Код:

var db = [
  "drawLine",
  "drawCircle",
  "drawCircleMore",
  "fillLine",
  "fillCircle",
  "fillCircleMore"
];

function popupClearAndHide() {
  autocomplete_result.innerHTML = "";
  autocomplete_result.style.display = "none";
}

function updPopup() {
  if (!autocomplete.value) {
    popupClearAndHide();
    return;
  }
  var a = new RegExp("^" + autocomplete.value, "i");
  for (var x = 0, b = document.createDocumentFragment(), c = false; x < db.length; x++) {
    if (a.test(db[x])) {
      c = true;
      var d = document.createElement("p");
      d.innerText = db[x];
      d.setAttribute("onclick", "autocomplete.value=this.innerText;autocomplete_result.innerHTML='';autocomplete_result.style.display='none';");
      b.appendChild(d);
    }
  }
  if (c == true) {
    autocomplete_result.innerHTML = "";
    autocomplete_result.style.display = "block";
    autocomplete_result.appendChild(b);
    return;
  }
  popupClearAndHide();
}

autocomplete.addEventListener("keyup", updPopup);
autocomplete.addEventListener("change", updPopup);
autocomplete.addEventListener("focus", updPopup);

#autocomplete {
  border: 1px solid silver;
  outline: none;
  margin: 0;
  background: #fff;
}

#autocomplete_result {
  border: 1px solid silver;
  border-top: 0;
  position: absolute;
  overflow: auto;
  max-height: 93px;
  background: #fff;
}

#autocomplete,
#autocomplete_result {
  width: 200px;
  box-sizing: border-box;
}

#autocomplete,
#autocomplete_result p {
  padding: 4px;
  margin: 0;
  color: #000;
}

#autocomplete_result p:nth-child(2n+1) {
  background: #f6f6f6;
}

#autocomplete_result p:hover {
  background: #e5e5e5;
}

<input id="autocomplete" type="text" />
<div id="autocomplete_result" style="display: none;"></div>

Answer 1

Событие при изменении запускается до того, как событие щелчка может быть завершено.

Удаление вызова при изменении решит проблему. Заменить прослушиватель событий "keyup" прослушивателем событий "input" отличное предложение из комментария ниже от 'imvain2'. Это сработает при любом вводе, а не только при нажатии клавиши.

Демо: https://jsfiddle.net/hexzero/qrwgh7pj/

    autocomplete.addEventListener("input", updPopup); 
    autocomplete.addEventListener("focus", updPopup);