Específicamente, quiero agregar palabras clave populares a la búsqueda, donde los usuarios pueden agregar texto al cuadro de búsqueda haciendo clic en las palabras clave. Aquí hay un ejemplo.
$(document).ready(function() { $('#searchHot li').click(function() { var name = $('#searchHot li').val(); $('#searchInput input').text(name); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="searchInput"> <input type="search"> </div> <ul id="searchHot"> <span>Popular:</span> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> </div>No funciona como se esperaba, lo siento, soy un novato de jquery y no estoy seguro de qué está fallando.
Cualquier ayuda, gracias de antemano!
Hay algunos problemas con la implementación actual:
#searchHot li , pero desea el texto del elemento de la lista en el que se hizo clic, no todos. Podría obtener una referencia al elemento en el que se hizo clic con $(e.target) , siendo e el evento pasado al controlador de la función de click ..val() pero no es una entrada y probablemente solo desee el contenido del texto, que se puede hacer con .text() ..text(name) pero desea configurar el valor de entrada para que sea el contenido, lo que se puede hacer con .val(name) .El siguiente fragmento de código debe mostrar una versión en la que hacer clic en el elemento de la lista reemplazará el contenido del campo de entrada.
$(document).ready(function() { $('#searchHot li').click(function(e) { var name = $(e.target).text(); $('#searchInput input').val(name); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div id="searchInput"> <input type="search"> </div> <ul id="searchHot"> <span>Popular:</span> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> </div>Si no desea que la entrada se reemplace y, en su lugar, se agregue, se podría hacer con algo como esto:
var input = $('#searchInput input'); input.val(input.val() + ' ' + name);