Click event listener works just on the second time

Question

This few lines of code suppose to work like a searching algorithm which also suggests keywords. Clicking on a keyword supposed to put the word into the input textbox. The words which can be results are the following: "first", "second".

The problem is that it doesn't work until the second click.

 var database = ["first", "second"]; var founded = true; $( '#list' ).on( 'click', '.list_elem', function() { $("#box").val(this.textContent); $("#list").empty(); }); $("#box").on("change paste keyup", function() { $("#list").empty(); var inputText = $(this).val(); if (inputText.length != 0) { for (var i = 0; i < database.length; i++) { founded = true; for (var j = 0; j < inputText.length; j++) { if(!(database[i][j].toLowerCase() == inputText[j].toLowerCase())) { founded = false; } } if(founded) { $( "#list" ).append('<div class="list_elem">' + database[i] + '</div>'); } } } });

 <input type="text" id="box"> <div id="list"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

This happens when the <input> looses focus and the change event is emitted, your code runs emptying the #list but then immediately after on keyup it repopulates it. You could use theinput event in place of change and keyup to workaround this:

$("#box").on("input paste", function() { ...

 var database = ["first", "second"]; var founded = true; $('#list').on('click', '.list_elem', function() { $("#box").val(this.textContent); $("#list").empty(); }); $("#box").on("input paste", function() { $("#list").empty(); var inputText = $(this).val(); if (inputText.length != 0) { for (var i = 0; i < database.length; i++) { founded = true; for (var j = 0; j < inputText.length; j++) { if (!(database[i][j].toLowerCase() == inputText[j].toLowerCase())) { founded = false; } } if (founded) { $("#list").append('<div class="list_elem">' + database[i] + '</div>'); } } } });

 <input type="text" id="box"> <div id="list"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

This is because the input has focus when typing, the first click makes the input lose focus. The second click actually fires the onClick(); The easiest solution I can think of is removing focus when the mouse enters the list. Here is a link to jQuery's mouseenter() function.