• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

137
Views
Reemplace el valor de entrada haciendo clic en el valor de búsqueda de AJAX

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>
about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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')
about 3 years ago · Juan Pablo Isaza Report

0

$(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.

about 3 years ago · Juan Pablo Isaza Report

0

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()); });
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error