0

tengo el siguiente formulario:

<!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>

Y me trae por medio de una función el archivo -productos.php-

<?php
if (isset($_GET['term'])){
    # conectare la base de datos
    $con=@mysqli_connect("localhost", "root", "root", "basededatos");

$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);

}
?>

Hasta alli todo funciona muy bien, si yo coloco el codigo del producto el me trae los datos y luego cuando elijo un producto me rellena los otros dos campos automaticamente.

El problema es que estoy buscando que ese input código sea un select y me traiga de mi base de datos los productos que ya están registrados por default y no necesariamente tenga yo que escribirlo sino que solo tenga que seleccionar el producto y ya me rellene los otros dos campos con la información que ya tengo.

De que forma podría hacerlo? muchas gracias quedo atento.

1 respuesta 1

1

pues se me ocurre, que podrías rellenar los options con un ajax que te traiga todos los valores del código, y tus otros 2 campos...

Aquí tienes el HTML de ejemplo:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(cargarCodigos);
        $(document).ready(initialEvents);

        function cargarCodigos() {
            $.ajax("Productos.php")
                .done(function (data) {
                    var response = JSON.parse(data); // Convertimos el json a objeto de JavaScript.
                    var sel = $('#codigo');
                    sel.empty();
                    sel.append('<option value="-1">Seleccione un código</option>'); // Insertamos un registro para que seleccionen.
                    for (var i = 0; i < response.length; i++) {
                        sel.append('<option value="' + response[i].codigo + '" precio="' + response[i].precio +
                            '" id_producto="' + response[i].id_producto + '" descProducto="' + response[i].descripcion + '">' +
                            response[i].codigo + '</option>'); // Agregamos los distintos registros.
                    }
                });
        }

        function initialEvents() {
            $('#codigo').on('change', function () { // Agregamos el evento change al select.
                var SelectedOption = $($('#codigo option:selected')[0]); // Obtenemos el elemento seleccionado.
                var descripcion = SelectedOption.attr('descProducto');
                var precio = SelectedOption.attr('precio');
                var id_producto = SelectedOption.attr('id_producto');
                $('#descripcion').val(descripcion);
                $('#precio').val(precio);
                $('#id_producto').val(id_producto);
            });
        }
    </script>
</head>
<body>
    <div class="ui-widget">
        Codigo: <select id="codigo"></select>
        Producto: <input type="text" id="descripcion" readonly>
        Precio: <input type="text" id="precio" readonly>
        <input type="hidden" id="id_producto">
        <p>Ingresa 00</p>
    </div>
</body>
</html>

Espero que te ayude, un saludo!!

5
  • 1
    Buenas @Rubén Espada, tu respuesta es util pero aun sigue sin funcionarme, hice lo mismo tal cual, y cambio el nombre de mi archivo productos.php por cargarCodigos.php y aun asi no hace nada, solo salen los input y ya. de todas formas muchas gracias por tu ayuda.
    – estrada
    el 19 dic. 2019 a las 16:45
  • Te dice algo en la consola? Mira la parte de Network para ver si está haciendo bien la petición, sino, dame un rato y hago un pequeño ejemplo y lo intento subir el 19 dic. 2019 a las 19:44
  • 1
    Ahí tienes, creo que lo que realmente faltaba antes, es pasar el json a objeto de JavaScript... Pero ese es el ejemplo completo que acabo de probar (en el php no he hecho cambios, sólo los propios para mi bbdd). Espero así te ayude @estrada el 19 dic. 2019 a las 20:34
  • 1
    Hola, listo @Rubén Espada, ya me funciono perfecto, muchas gracias.
    – estrada
    el 20 dic. 2019 a las 16:56
  • De nada compañero, cualquier cosa andamos por aquí jejeje :) el 21 dic. 2019 a las 19:59

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.