Skip to content
Advertisement

Why the onclick only works if you click twice?

I was searching for autocomplete examples in pure javascript, and I found a pretty good example on JSFiddle, but it has a Bug that I’m trying to figure it out how to fix.

The autocomplete only autocompletes the text if you click at the paragraph twice

Code:

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>

Advertisement

Answer

On change event is trigger before the click event can complete

Removing the on change call would fix the issue. Great suggestion from the comment below by ‘imvain2’ to replace “keyup” event listener with “input” event listener. This would trigger on any input, not only “keyup”.

Demo: https://jsfiddle.net/hexzero/qrwgh7pj/

    autocomplete.addEventListener("input", updPopup); 
    autocomplete.addEventListener("focus", updPopup); 
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement