Cuando presiono una tecla en la consola de entrada, muestra continuamente el error:
Error de referencia no capturado: showResults no está definido en HTMLInputElement.onkeyup
Como puede ver en el código, la función está definida. Cuando elimino el código AJAX, comienza a funcionar. No puedo averiguar cuál es el problema.
let search = $("#livesearch") function showResults(str) { if (str.length === 0) { search.addClass("hide"); } else { search.removeClass("hide"); } $.ajax({ url: "/search"; contentType: "application/json", method: "POST", data: JSON.stringify({ query: str }), success: function(result) { search.html(result.response); } }) } #addbtn { font-weight: bold; background-color: rgb(237, 245, 229); } #livesearch { background-color: #dddd; position: absolute; } .hide { display: none; } a:link, a:hover, a:visited, a:active { color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="col-xl-7 col-sm-7 col-md-7 "> <label class="form-label">Add Users</label> <input id="userinput" type="text" name="users[]" class="form-control" placeholder="Name" onkeyup="showResults(this.value)"> <div id="livesearch" class="p-3 col-12 hide">This</div> <button id="addbtn" class="form-control mt-3" type="button" onClick="addInput();">Add</button> <div id="error" class="text-danger p-2"></div> <div id="formulario" class="d-flex flex-row flex-wrap mt-2"></div> </div>Cuando tenga problemas en JS, siempre abra devtools y compruebe si hay errores en la consola. El problema en este caso es que tienes un ; en el lugar correcto - después de la url: "/search"; . Esto significa que la función no está definida correctamente y no se puede llamar. Cambiar el ; a a , y el código funciona.
Aparte del problema, no use los atributos de evento onX en su HTML. Están enormemente desactualizados y ya no son una buena práctica. Enlace controladores de eventos discretos usando el método on() de jQuery o el simple JS addEventListener()
jQuery($ => { let $search = $("#livesearch") $('#userinput').on('input', e => { let str = e.target.value; $search.toggleClass('hide', !str.length); $.ajax({ url: "/search", contentType: "application/json", method: "POST", data: JSON.stringify({ query: str }), success: function(result) { search.html(result.response); } }) }); $('#addbtn').on('click', e => { console.log('add...'); }); }); #addbtn { font-weight: bold; background-color: rgb(237, 245, 229); } #livesearch { background-color: #dddd; position: absolute; } .hide { display: none; } a:link, a:hover, a:visited, a:active { color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="col-xl-7 col-sm-7 col-md-7 "> <label class="form-label">Add Users</label> <input id="userinput" type="text" name="users[]" class="form-control" placeholder="Name" /> <div id="livesearch" class="p-3 col-12 hide">This</div> <button id="addbtn" class="form-control mt-3" type="button">Add</button> <div id="error" class="text-danger p-2"></div> <div id="formulario" class="d-flex flex-row flex-wrap mt-2"></div> </div>