Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

160
Visualizações
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 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

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 4 years ago · Juan Pablo Isaza Relatório

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 4 years ago · Juan Pablo Isaza Relatório

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 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda