1

esto componiendo un search input instantaneo y mi código es este:

El formulario

    <form accept-charset="utf-8" id="dscto" method="POST">  
    <input name="marca_cercador_nom" id="busqueda" onKeyUp="buscar();" />
    <div id="resultadoBusqueda"></div>
    </form>

la pagina que carga el formulario

             $(document).ready(function()         {$("#resultadoBusqueda").html('');});                 
             function buscar() {
                 var textoBusqueda = $("input#busqueda").val();
                  if (textoBusqueda != "") {
                     $.post("search.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
                         $("#resultadoBusqueda").html(mensaje);
                      }); 
                  } else { 
                     $("#resultadoBusqueda").html('');
                     };
             };

Me envía datos a search.php y me lista las coincidencias. Todo correcto. Pero al seleccionar una de las opciones listadas (desde search.php):

  <a data="$data" id="$id">$data</a>

Necesito que dicha opción aparezca seleccionada dentro de mi input, pero no puedo. He probado con:

   $('#busqueda').val($('#'+id).attr('data'));

Pero sin éxito. Alguna sugerencia?

1 respuesta 1

1

Intenta hacer lo siguiente:

  • Tras obtener el resultado HTML, asignale a los a que en el evento click ejecuten una función (en mi ejemplo setBusqueda).

  • En search.php, podrías simplificar los a a simplemente <a id="$id">$data</a>

Así:

$(document).ready(function () {
  $("#resultadoBusqueda").html('');
  

  //-----------------------------------
  // CODIGO SOLO PARA LA DEMO
  $("#resultadoBusqueda").html('\
    <a id="1">Resultado A</a><br/>\
    <a id="2">Resultado B</a><br/>\
    <a id="3">Resultado C</a><br/>\
    <a id="4">Resultado D</a><br/>\
  ');
  $("#resultadoBusqueda").find('a').on('click', setBusqueda);
  //-----------------------------------
  
});

function setBusqueda() {
  var $a = $(this);
  $('#busqueda').val($a.text() + ' (' + $a.attr('id') + ')');

}

function buscar() {
  var textoBusqueda = $("input#busqueda").val();
  if (textoBusqueda != "") {
    $.post("search.php", {
      valorBusqueda: textoBusqueda
    }, function (mensaje) {
      $("#resultadoBusqueda").html(mensaje);
      // Asignamos a todos los "a" que en el `click`
      // llamen a la funcion "setBusqueda"
      $("#resultadoBusqueda").find('a').on('click', setBusqueda);
    });
  } else {
    $("#resultadoBusqueda").html('');
  }
}
<form accept-charset="utf-8" id="dscto" method="POST">  
  <input name="marca_cercador_nom" id="busqueda" onKeyUp="buscar();" />
  <div id="resultadoBusqueda"></div>
</form>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

3
  • Fabuloso. Funciona perfecto. Solamente he añadido una línea para que el resultado desaparezca una vez seleccionado un valor: He añadido esto a la función setBusqueda $('#resultadoBusqueda').fadeOut(500); muchísimas gracias!!!!
    – rafa_pe
    Commented el 29 nov. 2016 a las 9:45
  • Solo una cuestión más: si en el archivo php quiero enviar un valor diferente al del nombre <a data="$data" id="$id">$data</a> y recoger el $id en vez de $data, cómo resuelvo el find() que recupera el valor de los a actualmente?
    – rafa_pe
    Commented el 29 nov. 2016 a las 10:08
  • Fantástico, muchísimas gracias!!!
    – rafa_pe
    Commented el 29 nov. 2016 a las 15:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.