En este tutorial voy a mostrar cómo rellenar varios campos de texto usando el plugin autocomplete de jQuery. Por ejemplo, yo voy a buscar el código de un producto que se encuentra almacenado en mi base de datos usando jQuery autocomplete, el resultado mostrará la lista de nombres de productos que coinciden con la búsqueda. Durante la selección del nombre del producto a partir de cualquiera de los resultados de la búsqueda, se rellenará automáticamente en su respectivo campo los siguientes datos: el código del producto, nombre del producto, precio del producto y el id del producto que se rellenará en un campo oculto.
Paso 1: Crear su base de datos, para el ejemplo se ha utilizado una llamada test
Paso 2: Importar la tabla productos a la base de datos
Paso 3: Crear archivo index.html para el jQuery Autocomplete
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Autocompletado de Mutiples campos Usando jQuery , Ajax , PHP y MySQL</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript"> $(function() { $("#codigo").autocomplete({ source: "productos.php", minLength: 2, select: function(event, ui) { event.preventDefault(); $('#codigo').val(ui.item.codigo); $('#descripcion').val(ui.item.descripcion); $('#precio').val(ui.item.precio); $('#id_producto').val(ui.item.id_producto); } }); }); </script> </head> <body> <div class="ui-widget"> Codigo: <input id="codigo"> Producto: <input id="descripcion" readonly> Precio: <input id="precio" readonly> <input type="hidden" id="id_producto"> <p>Ingresa 00</p> </div> </body> </html> |
Paso 4: Crear el archivo llamado productos.php que procesará los datos enviados por el jQuery Autocomplete.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php if (isset($_GET['term'])){ # conectare la base de datos $con=@mysqli_connect("localhost", "root", "root", "test"); $return_arr = array(); /* Si la conexión a la base de datos , ejecuta instrucción SQL. */ if ($con) { $fetch = mysqli_query($con,"SELECT * FROM productos where codigo_producto like '%" . mysqli_real_escape_string($con,($_GET['term'])) . "%' LIMIT 0 ,50"); /* Recuperar y almacenar en conjunto los resultados de la consulta.*/ while ($row = mysqli_fetch_array($fetch)) { $id_producto=$row['id_producto']; $precio=number_format($row['precio_venta'],2,".",""); $row_array['value'] = $row['codigo_producto']." | ".$row['nombre_producto']; $row_array['id_producto']=$row['id_producto']; $row_array['codigo']=$row['codigo_producto']; $row_array['descripcion']=$row['nombre_producto']; $row_array['precio']=$precio; array_push($return_arr,$row_array); } } /* Cierra la conexión. */ mysqli_close($con); /* Codifica el resultado del array en JSON. */ echo json_encode($return_arr); } ?> |
He creado una entrada para autocompletar datos con solo con JavaScript sin dependencias de jQuery, puedes echarle un vistazo a continuación
Librería de autocompletado desarrollada con Javascript para Bootstrap 5.
