0

Buen dia, el siguiente codigo autocompleta un input con la informacion de un producto (descripcion) guardado en mysql al digitar parte de la palabra, aqui el JS

$(document).ready(function()
{
  $('#input_descripcion').typeahead(
  {
    source: function (query, result)
    {
      $.ajax({
        url: "../PHP/autocompletar_info_producto_existente.php",
        data: 'query=' + query,
        dataType: "json",
        type: "POST",
        beforeSend: function()
            {
          $('#div_estado_busqueda_producto').html("buscando producto...");
            },

        success: function (data)
        {
          //primero comprobar si el servidor respondió "producto no encontrado"
          if(data=="producto no encontrado")
          {
            $('#div_estado_busqueda_producto').html("Producto no encontrado");
          }
          //si no respondio "Cliente no encontrado" hacer el autocomplete
          result($.map(data, function (item)
          {
            //borra div_estado_busqueda_product
            $('#div_estado_busqueda_producto').html("");
            return item;
          }));
        }
      });
    }
  });
});

aqui el php

<?php
require('conectar.php');
if(isset($_POST["query"]))
{
  //realizo la consulta
  $query = "SELECT distinct descripcion FROM productos WHERE descripcion LIKE '%".$_POST["query"]."%' ORDER BY descripcion ASC";
  $result = mysqli_query($conexion, $query);

  if(mysqli_num_rows($result) > 0)
  {
    //armo un array con los resultados
     while($row = mysqli_fetch_array($result))
     {
          $output[] = $row["descripcion"];
     }
  }
  //si no hubo resultados
  else
  {
       $output='producto no encontrado';
  }
  //enviar la variable $output en formato json
  echo json_encode($output);
}
?>

todo funciona de maravilla...

el problema es que ahora tengo en una tabla en la cual en una de sus columnas se agregan inputs automaticamente con un boton de agregar fila, quedandome inputs en esa columna por ejemplo de la siguiente forma

<input type='text' id='producto1'></input>
<input type='text' id='producto2'></input>
<input type='text' id='producto3'></input>

etc etc

que idea me sugieren para que el autocompletar sirva en cada input por separado?

el codigo anterior funciona para un imput en el cual yo conozco el id pero en este caso pueden haber 5, 7, 10 etc cantidad de inputs donde cada uno como acabo de mostrar tiene id distinto, pense en hacer la misma funcion 20 veces por separado, una para el input de id='producto1' otra para id='producto1' pero eso me limitaria a que solo se puedan agregar 20 inputs y puede que hayan mas y me saldria un monton de funciones que en caso de haber cambios tendria que hacercelos a todas por separado, tampoco sirve por clase por que si le pongo la clase a todos por igual me autocompletaria todos por igual al mismo tiempo

alguna idea?

2
  • Entiendo que por cada input que agregues quieres que se haga el proceso de autocompletado verdad? Y el proceso será automático. Podrías agregar el método que te añade inputs? Gracias el 8 feb. 2019 a las 7:32
  • Es que no debes usar las ids (que deben ser únicas) para estas cosas, usa mejor una clase y dentro del ajax manipulas el elemento (en este caso rellenar su value) tirando de this. Al usar typeahead no se decirte exactamente, pero si el ajax lo colocas en el evento change lo puedes localizar fácilmente con event.target
    – Fly
    el 8 feb. 2019 a las 14:12

1 respuesta 1

0

Si quieres programar una acción que se repite en mucho elementos, lo más sencillo es hacerlo mediante la clase, así basta con añadirle la clase deseada y el elemento actuará como queremos, pudiendo ademas tener varias clases las posibilidades crecen de forma exponencial con una gestión sencilla.

Aunque con JQuery nos importa realmente poco la forma de seleccionar los elemento sobre los que aplicar la programación, con la potencia de sus selectores puedes seleccionar todos los input que el nombre empiece por 'producto' y que sean hijos de un li sin despeinarte, con solo poner:

$('li > input[name^="producto"]').

Pero bueno, para el ejemplo usaré una clase, quedando así:

<html>
<input id="elemento1" class="autocompletado" name="elemento1" value="">
<input id="elemento2" class="autocompletado" name="elemento2" value="">
<input id="elemento3" class="autocompletado" name="elemento3" value="">

<script>
$(document).ready(function(){   

  $('.autocompletado').keyup(function(evento){
    elemento_activo = evento.target;
      $.ajax({
        url:'/echo/js/?js=texto desde ajax!',
        complete: function (response) {
            $(elemento_activo).val(response.responseText);
        },
    });
    return false;    
  })
});
</script>
</html>

Puedes verlo en funcionamiento aquí.

Para no liar el ejemplo lo que hace es cambiar el value del input, en vez de sacar una lista de palabras coincidentes, eso te lo dejo a ti ;)

Todo el truco del asunto está en localizar correctamente el elemento que lanzó el evento y JQuery nos lo ofrece desde el manejador, que nos trae como parámetro un objeto tipo event, el cual hace referencia a él en su propiedad target.

Por lo tanto, teniendo en event.target el elemento que ha pulsado el usuario, ya solo nos queda movernos por el árbol del DOM para crear o modificar lo que necesitemos.


Intentando conciliar el ejemplo expuesto con tu código, me he encontrado esto en la documentación oficial de typeahead, aunque no se si será la misma librería que usas tu. Si es así, no te haría falta usar un ajax de jquery, pues ya tiene el suyo propio para realizar lo que necesitas.

Aún así, si quieres o necesitas usar un ajax tal como pones en tu código, mi sugerencia sería:

$(document).ready(function()
{
  $('.input_descripcion').typeahead(
  {
    source: function (query, result)
    {
      elemento_activo = this;
      div_estado_busqueda_producto = $(elemento_activo).closest('.estado');
      $.ajax({
        url: "../PHP/autocompletar_info_producto_existente.php",
        data: 'query=' + query,
        dataType: "json",
        type: "POST",
        beforeSend: function()
            {
          $(div_estado_busqueda_producto).html("buscando producto...");
            },

        success: function (data)
        {
          //primero comprobar si el servidor respondió "producto no encontrado"
          if(data=="producto no encontrado")
          {         
            $(div_estado_busqueda_producto).html("Producto no encontrado");
          }          
          //si no respondio "Cliente no encontrado" hacer el autocomplete
          result($.map(data, function (item)
          {
            //borra div_estado_busqueda_product
            $(div_estado_busqueda_producto).html("");
            return item;
          }));
        }
      });
    }
  });
});

En tu código asumo que, dentro de typeahead, this hace referencia al elemento input (elemento_activo = this;) y que el div donde sacas la información al usuario tendrá una clase estado para poder localizarlo usando la funcion closest.


Adicionalmente, comentarte que, creo, sobra la parte de :

      if(data=="producto no encontrado")
      {
        $('#div_estado_busqueda_producto').html("Producto no encontrado");
      }

Basta con que el primer (y único) item sea "Producto no encontrado" y el resultado será el mismo, con el beneficio adicional de que el texto mostrado será decisión del ajax y no de la función. Así te valdrá la misma función tanto para el ajax de clientes, de el productos o de los que sea.

Saludos.

Tu Respuesta

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

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