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?
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ñadeinputs
? Graciasvalue
) tirando dethis
. Al usartypeahead
no se decirte exactamente, pero si el ajax lo colocas en el eventochange
lo puedes localizar fácilmente conevent.target