1

Tengo un formulario y en ese formulario un Input (autocompleteCliente) que busca en mi base de datos los nombres de algunos clientes usando el plugin de jQuery Autocomplete, sin embargo toda esa informacion se guardara en una tabla, pero no quiero guardar el nombre del cliente si no el ID del mismo. El asunto es el siguiente, ¿Como puedo obtener el ID del cliente y seguidamente guardarlo en mi base de datos? Porque podria autocompletar otro input (autocompleteID) con el ID siempre (PERO COMO OCULTO) y cuando el Input (autocompleteCliente) que busca el nombre de cliente se llene.

Dejo mi formulario, la peticion ajax que se comunica con mi controlador para generar el autocomplete y mi controlador. Espero haberme dejado explicar, los leo

Formulario:

<input class="form-control" id="autocompleteCliente" type="text" placeholder="Antony Rosado Talledo">
                                    <input class="form-control" id="autocompleteID" type="text" placeholder="Antony Rosado Talledo">

Ajax para el Autocomplete:

$('#autocompleteCliente').autocomplete({
    source: function(request, response){
        $.ajax({
            url: "{{ route('clientes.autocompleteCliente') }}",
            datatype: 'json',
            data: {
                term: request.term
            },
            success: function(data){
                response(data)
            }
        });
    }
});

Controlador:

public function autocompleteCliente(Request $request){
    $term = $request->get('term');

    $querys = Cliente::where('nombCliente', 'LIKE', '%' . $term . '%')->get();

    $data = [];

    foreach ($querys as $querys) {
        $data[] = [
            'label' => $querys->nombCliente
        ];
    }

    return $data;
}
3
  • aunque no es una buena práctica puedes llenar dicho input con el id y ocultarlo con la siguiente etiqueta "hidden" es un input normal simplemente no se muestra en el html Commented el 11 may. 2021 a las 13:31
  • 1
    creo que tu pregunta esta basada en opiniones o tienes un problema de diseño/estructura. y la informacion que muestras de ejemplo dice muy poco. el tema esta en la consulta, si estas escribiendo el nombre del usuario o quieres el Id y los datos estan en dos tablas deberias hacer un inner join que te traiga el id relacionado, pero nada de eso se deja ver en tu codigo donde insertas los datos en la tabla de mencionas etc...
    – user46896
    Commented el 11 may. 2021 a las 14:16
  • @WalterStivenCarrilloDuarte Justo eso tenia pensado hacer pero Triby ya me resolvio mis dudas, aun soy muy novato de que otra forma lo podrias solucionar?
    – KaoX
    Commented el 11 may. 2021 a las 15:27

1 respuesta 1

1

Hay dos formatos disponibles para enviar los datos a autocomplete, estás usando el segundo, pero enviando solo el texto a mostrar (nombre) y falta el valor (ID). Al generar el arreglo en PHP agrega también ID del cliente, solo asegúrate de enviar el valor adecuado:

$data[] = [
    'label' => $querys->nombCliente,
    'value' => $querys->idCliente
];

En HTML ya tienes un campo donde se muestra y selecciona nombre del cliente; vas a necesitar un campo adicional para guardar ID de cliente seleccionado:

<input class="form-control" id="autocompleteCliente" type="text" placeholder="Antony Rosado Talledo">
<input type="hidden" name="idCliente" id="idCliente" value="">

En Javascript solo debes agregar una función para actualizar el campo oculto cuando se seleccione un cliente (evento select):

$('#autocompleteCliente').autocomplete({
    source: function(request, response){
        $.ajax({
            url: "{{ route('clientes.autocompleteCliente') }}",
            datatype: 'json',
            data: {
                term: request.term
            },
            success: function(data){
                response(data)
            }
        });
    },
    // Ejecutar cuando se seleccione un cliente
    select: function(evento, selected) {
        // Actualizar campo oculto
        $('#idCliente').val(selected.item.value);
    }
});
3
  • 1
    Muy clara la respuesta, una pequeña edición `En Javascript solo debes agregar una funció' agregando la n a función.
    – Ragnar
    Commented el 11 may. 2021 a las 15:04
  • @Nor, gracias por la corrección
    – Triby
    Commented el 11 may. 2021 a las 15:12
  • 1
    Triby muchas gracias, hice lo que me comentaste y me funciono de maravilla claro que primero al momento de ejecutar el codigo me actualizava los dos INPUTS con el id del cliente, asi que decidi agregarle evento.preventDefault(); encima del $('#idCliente').val(selected.item.value); para que el input que me bota el nombre del cliente no cambie Reitero mi agradeciemiento para contigo amigo!
    – KaoX
    Commented el 11 may. 2021 a las 15:26

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.