este código es para la búsqueda de autocompletar
El tema en el que se hizo clic no se muestra en 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; } }); si elimino $(function(){ ....}) entonces select(e) funcionando bien
NOTA : el código anterior es parte de un archivo jQuery largo, por eso necesito una solución en Jquery
es porque select(e) está dentro de la función anónima por lo que se puede acceder, debe crear el elemento usando document.createElement("li") y adjuntar el oyente o simplemente agregar el oyente de clic al documento y verificar si el objetivo es el elemento que querías
document.body.onclick = function(e) { if (e.target.className == 'item') inputBox.value = e.target.textContent }manifestación
$(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 class="item">${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 class="search-input"> <input type="text"> </div> <div class="search"></div> <div class="suggBox"></div>