Pude devolver el valor del resultado de php sql pero al hacer clic en el valor del resultado no puedo establecer el valor de entrada, cómo hacerlo, gracias.
guion
$(document).ready(function(){ $('#input').on("keyup input", function(){ var input = $(this).val(); var result = $(this).parent().parent().next(".result"); if(input.length){ $.get("backend-search.php", {term: input}).done(function(data){ result.html(data); }); } else{ result.empty(); } }); $(document).on("click", ".result p", function(){ $(this).prev().children().children('input[type="text"]').val($(this).text()); result.empty(); }); });
HTML
<div> <div> <ol style="list-style: none;"> <li> <input id='input' type="text" autocomplete="off" placeholder="Search..." /> </li> </ol> <div class="result"></div> </div> </div>
Suponiendo que su conjunto de resultados se vea así:
<div class='result'> <p></p> <p></p> <p></p> </div>
Luego analice lo que está haciendo este selector si hace clic, por ejemplo, en el segundo <p>
:
$(this).prev().children().children('input[type="text"]')
.prev()
apuntará al " hermano inmediatamente anterior ". Para nuestro caso de ejemplo, seleccionaría el primer <p>
;
A continuación, .children()
busca en el árbol DOM los hijos de ese <p>
. No nos ha mostrado cómo se ve ese HTML, pero lo más probable es que sea texto sin formato, sin elementos secundarios. Incluso si tiene algo (por ejemplo <span>
), no nos ayudará a volver a <input>
, esta es la dirección incorrecta.
Realmente necesita buscar primero el DOM, hasta que lleguemos a algo que incluya la entrada, y luego retroceda.
$(this).parent().parent().find('input')
El primer .parent()
seleccionará <div class='result'>
;
El segundo apuntará al padre <div>
que incluye tanto su entrada como sus resultados;
El .find()
buscará hacia abajo desde ese nodo en busca de una entrada;
Puede simplificar esto y hacerlo un poco más seguro frente a futuros cambios de HTML agregando una clase al elemento que contiene tanto la entrada como los resultados. En un comentario, menciona que planea tener varios conjuntos de ellos, por lo que tal vez cada "conjunto" podría llamarse una "búsqueda":
<div class='search'> <ol> ... <input> ... </ol> <div class='result'> ... </div> </div> <div class='search'> <ol> ... <input> ... </ol> <div class='result'> ... </div> </div>
Ahora es mucho más fácil apuntar a los elementos correctos usando .closest()
:
$(this).closest('.search').find('input')
$(document).ready(function () { $("#input").on("keyup input", function () { var input = $(this).val(); var result = $(this).parent().parent().next(".result"); if (input.length) { $.get("backend-search.php", { term: input, }).done(function (data) { result.html(data); }); } else { result.empty(); } }); $(document).on("click", ".result p", function () { var result = $(".result"); //important $(this) .prev() .children() .children('input[type="text"]') .val($(this).text()); result.empty(); }); });
Creo que agregar esta línea de código debería resolver su problema.
Puede usar el siguiente código que toma el valor del resultado y lo coloca en la entrada.
$(document).on("click", ".result", function(){ $('#input').val($('.result').text()); });