Jquery autocomplete with Ajax via PHP and Mysql

Asked

Viewed 916 times

0

I have an input that is populated via Jquery autocomplete. Simple and efficient. But I wanted to make sure that when selecting a number of this input (it is a mobile IMEI number) it already looked (I imagine it is in Ajax) the device to which it is attached (I have a database in Mysql for this).

Autocomplete:

inserir a descrição da imagem aqui

Template that should appear after selecting the IMEI in the previous input:

inserir a descrição da imagem aqui

The autocomplete is quiet. But I do not know how to get the information of the Model related to the IMEI... Actually PHP and Mysql have no difficulty, just do not know how to do it (JS, Ajax, etc).

I’ll post part of the code here to make it easier:

<h2>Comece escolhendo uma das linhas disponíveis</h2>
                        <div id="form-step-0" role="form" data-toggle="validator">
                            <div class="form-group">
                                <!-- Include jQuery -->
                                 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                                 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
                            <script>
                                  $( function() {
                                     var availableTags = [
                                     <?php
                                     $cont = 1;
                                        for ($x = 47; $x <= 49; $x++) {
                                            //Seleciona as linhas em estoque
                                            $result1 = mysqli_query($conn, "SELECT * FROM sdc_tm_linhas WHERE ddd = '$x' AND usuario LIKE '%ESTOQUE%' ORDER BY ddd ASC");
                                            $r1 = mysqli_affected_rows($conn);
                                            if ($r1 == 0) continue;
                                            while ($row = mysqli_fetch_assoc($result1)) {
                                                echo $row['ddd'];
                                                $linha = $row['linha'];
                                                $juntos = $ddd.$linha;
                                                echo ' "'.$juntos.'", ';
                                            }
                                        }
                                        echo ' "" ';
                                     ?>
                                     ];
                                     $( "#linha" ).autocomplete({
                                        source: availableTags
                                     });
                                  } );
                                  </script>
                                <div class="ui-widget">
                                    <label for="linha">Digite a linha com DDD:</label>
                                        <input id="linha" type="search">
                                </div>

                                 <div class="help-block with-errors"></div>
                            </div>
                        </div>
               </div>

               <div id="step-2">
                    <label class="control-label"><h2>Dados do aparelho</h2></label>
                    <div id="form-step-1" role="form" data-toggle="validator">
                        <div class="form-group">
                           <label for="imei">IMEI:</label>
                                    <script>
                                    $( function() {
                                    var availableTags2 = [
                                    <?php
                                    $cont = 1;
                                    $result1 = mysqli_query($conn, "SELECT * FROM sdc_tm_linhas WHERE linha = 0 AND usuario LIKE '%ESTOQUE%'");
                                    while ($row = mysqli_fetch_assoc($result1)) {
                                        $imei = $row['imei'];
                                        echo ' "'.$imei.'", ';
                                    }
                                    echo ' "" ';
                                    ?>
                                    ];
                                        $( "#imei" ).autocomplete({
                                            source: availableTags2
                                        });
                                    });
                                    $(document).ready(function(){
                                         $("imei").keyup(function(){
                                              $.get("inserir_ajax.php", function(data, status){
                                                    alert("Data: " + data + "\nStatus: " + status);
                                              });
                                         });
                                    });
                                  </script>
                            <input style="min-width: 300px; max-width: 600px;" type="number" min="0" class="form-control" name="imei" id="imei" placeholder="IMEI do aparelho" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
  • 1

    You can do with Ajax or by submitting the form (will reload the page).

  • Which autocomplete plugin is using ? Most of them, if not all, come with a callback method, ie, it will fire something after you choose something in the combobox. That way you could call another ajax to search the data referring to that IMEI

  • I’m using this one: https://jqueryui.com/autocomplete/

  • I tried to follow this example here http://jqueryui.com/autocomplete/#remote-jsonp but got even more lost!

2 answers

0


I managed to fix it. After the autocomplete script, I put the following:

$(document).ready(function () {
    $( "#imei" ).focus();
    $('#imei').on('change', function (e) {
        var imei = $('#imei').val();
        //$('#modelo').val($('#imei').val());
        $.ajax({
            type: "GET",
            url: "inserir_ajax.php?imei="+imei,
            data: imei,
            cache: false,
            success: function(data){
                $("#modelo").val(data);
            }
        });
    });
});

It may even be wrong or lacking thing, but it solves my problem! Thanks to those who were willing to give a light!

0

My fault, I forgot to inform that I am using the Smartwizard in 5 steps:

inserir a descrição da imagem aqui

Browser other questions tagged

You are not signed in. Login or sign up in order to post.