0

Sigo intentando perfeccionar mi formulario con la función de auto completado.

El código que tengo hasta ahora funciona mediante la opción keydown y necesitaría que se iniciara la consulta a mysql cuando el usuario de el foco al imput text que tiene asignada la consulta y no cuando pulse. He probado con las opciones "click" "focus" "ready", pero solo aparece el desplegable con la opción keydown.

$(document).on('keydown', '.nombreccli', function() {

Otro problema que tengo es que la función de auto completar busca el imput text mediante su class. Estoy utilizando los estilos de bootstrap y al tener varias cajas de texto con la función de autocompletar tengo que usar la etiqueta class de estás como id y por lo tanto pierdo el estilo css.

$(document).on('keydown', '.nombreccli', function() {

Muchas gracias,

index.php

<html>
        <head>
            <title>Webslesson Demo - Dynamically Add or Remove input fields in PHP with JQuery</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
            <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
            <script src="jquery-ui.min.js" type="text/javascript"></script>
            <meta charset="utf-8">

        <script type="text/javascript">
            $(document).ready(function(){

                $(document).on('keydown', '.nombrecli', function() {

                    var id = this.id;
                    var splitid = id.split('_');
                    var index = splitid[1];

                    $( '#'+id ).autocomplete({
                        minLength: 0, // <-- AQUI le indicamos que se despliegue sin esperar a que ingresen datos
                        source: function( request, response ) {
                            $.ajax({
                                url: "getDetails.php",
                                type: 'post',
                                dataType: "json",
                                data: {
                                    search: request.term,request:1
                                },
                                success: function( data ) {
                                    response( data );
                                }
                            });
                        },
                        select: function (event, ui) {
                            $(this).val(ui.item.label); // display the selected text
                            var userid = ui.item.value; // selected id to input

                            // AJAX
                            $.ajax({
                                url: 'getDetails.php',
                                type: 'post',
                                data: {userid:userid,request:2},
                                dataType: 'json',
                                success:function(response){

                                    var len = response.length;

                                    if(len > 0){
                                        var idcli = response[0]['idcli'];
                                        var namecli = response[0]['nombrecli'];
                                        var telefonocli = response[0]['telefonocli'];


                                        document.getElementById('nombrecli_'+index).value = namecli;
                                        document.getElementById('telefonocli_'+index).value = telefonocli;


                                    }

                                }
                            });

                            return false;
                        }
                    });
                });


            });



        </script>


        </head>
        <body>
            <div class="container">
                <br />
                <br />
                <h2 align="center"><a href="http://www.webslesson.info/2016/02/dynamically-add-remove-input-fields-in-php-with-jquery-ajax.html" title="Dynamically Add or Remove input fields in PHP with JQuery">Dynamically Add or Remove input fields in PHP with JQuery</a></h2><br />
                <div class="form-group">
                    <form name="add_name" id="add_name">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="dynamic_fieldcli">

                                <td colspan="3" align="center" style="color:#FFFFFF" bgcolor="#00CCFF"><b>DATOS DEL CLIENTE</b></td>
                                <tr>
                                    <td>CLIENTE: <input type="text" name="nombrecli_1" placeholder="Enter your Name" id='nombrecli_1' size="25" class="nombrecli" class="form-control name_list1" /></td>
                                    <td>REF. CLIENTE:<input type="text" name="referencia_cliente" placeholder="Introduce la referencía de facturación" id='referencia_cliente'  size="40" class="form-control name_list"" /></td>
                                    <td>Orden:<input type="file" name="ordendecarga" placeholder="Sube la orden de carga" id='ordendecarga'  size="10" class="form-control name_list"" /></td>

                                </tr>

                            </table>
                        </div>


                    </form>
                </div>




        </body>
    </html>

    <script>
    $(document).ready(function(){
        var i=1;
        $('#addcon').click(function(){
            i++;
            $('#dynamic_fieldcon').append('<tr id="row'+i+'"><td>CONTACTO '+i+':<input type="text" name="nombrecon'+i+'" id="nombrecon'+i+'" placeholder="Enter your Name" class="nombrecon'+i+'" size="25" class="form-control name_list" /></td><td><input type="text" name="telefonocon'+i+'" id="telefonocon'+i+'" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="mailcon'+i+'" id="mailcon'+i+'" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
        });


        $(document).on('click', '.btn_remove', function(){
            i--;
            var button_id = $(this).attr("id"); 
            $('#row'+button_id+'').remove();
        });



    });



        $('#submit').click(function(){      
            $.ajax({
                url:"adddataviajes.php",
                method:"POST",
                data:$('#add_name').serialize(),
                success:function(data)
                {
                    alert(data);
                    $('#add_name')[0].reset();
                }
            });
        });

    });
    </script>

1 respuesta 1

0

Para referenciar los imput text por el "id" en vez de por la etiqueta "class" hay que modificar:

 $(document).on('keydown', '.nombrecli', function() {

por:

$(document).on('keydown', '#nombrecli', function() {

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.