this code is for auto-complete search

clicked topic is not showing in search-input-box

$(function () {
  let s = ["aa", "abb", "acc", "adf"],
    search = document.querySelector(".search"),
    inputBox = document.querySelector(".search-input input"),
    suggBox = document.querySelector(".suggBox");
  inputBox.onkeyup = (e) => {
    let userData = e.target.value;
    let A = [];
    if (userData) {
      A = s.filter((d) => {
        return d.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
      });
      A = A.map((d) => {
        return (d = `<li onclick="select(this)">${d}</li>`);
      });
      search.classList.add("active");
      show(A);
    }
  };
  function show(e) {
    suggBox.innerHTML = !e.length
      ? `<li>`   inputBox.value   `</li>`
      : e.join("");
  }
  function select(e) {
    inputBox.value = e.textContent;
  }
});

if i remove $(function(){ ....}) then select(e) working fine

NOTE above code is part of some long jQuery file thats why i need solution in Jquery

CodePudding user response：

it is because select(e) is inside anonymous function so it can be accessed, you have to create element using document.createElement("li") and attach the listener or simply add click listener to the document and check if target is the element that you wanted.

document.body.onclick = function(e) {
  if (e.target.className == 'item')
    inputBox.value = e.target.textContent
}

demo

$(function() {
  let s = ["aa", "abb", "acc", "adf"],
    search = document.querySelector(".search"),
    inputBox = document.querySelector(".search-input input"),
    suggBox = document.querySelector(".suggBox");
  inputBox.onkeyup = (e) => {
    let userData = e.target.value;
    let A = [];
    if (userData) {
      A = s.filter((d) => {
        return d.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
      });
      A = A.map((d) => {
        //  return (d = `<li onclick="select(this)">${d}</li>`); // replace this
        return (d = `<li >${d}</li>`);
      });
      search.classList.add("active");
      show(A);
    }
  };

  function show(e) {
    suggBox.innerHTML = !e.length ?
      `<li>`   inputBox.value   `</li>` :
      e.join("");
  }

  /*function select(e) {
    inputBox.value = e.textContent;
  }*/
  $(document).on('click', '.item', function(){
    inputBox.value = this.textContent;
  })
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <input type="text">
</div>
<div ></div>
<div ></div>