CODEWITHSUNDEEP
javascripthtmlcss
Banha Dix
Banha Dix

Reputation: 123

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>

Upvotes: 3

Views: 179

Answers (1)

Mantas Brasiunas
Mantas Brasiunas

Reputation: 424

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);

Upvotes: 6

Related Questions