选择自动完成ui Jquery后加载数据

Question

I want to display row details after selecting a jquery auto complete input using json array ajax function i have auto complete ui code jquery autocomplete is not working with php mysql . I try to extend its functionality but failed. here is my attempt. thanks for reading and helping

    <div class="col-lg-9">
                    <input type="text" id="clientName" class="form-control" autocomplete="off">
                </div>
                <div class="table-responsive" id="client_details" style="display:none">
                    <table class="table table-bordered">
                        <tr>
                            <td><b>Client Name</b></td>
                            <td>
                                <spam id="lblClientName"></spam>
                            </td>
                        </tr>
                        <tr>
                            <td><b>Client Company name </b></td>
                            <td>
                                <spam id="lblClientCompanyName"></spam>
                            </td>
                        </tr>
                        <tr>
                            <td><b>Address</b></td>
                            <td>
                                <spam id="clientAddress"></spam>
                            </td>
                        </tr>
                        <tr>

                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </form>
    <script src="js/order.js" type="text/javascript"></script>

    **jquery**

            $(document).ready(function () {
    $("#clientName").autocomplete({
        source: 'php_action/fetchClient.php',
        select: function( event, ui ) {
        var clientName = $('#clientName').val();
        if (clientName != '') {
            $.ajax({
                url: "php_action/fethClientByName.php",
                method: "POST",
                data: {
                    clientName: clientName
                },
                dataType: "JSON",
                success: function (data) {
                    $('#client_details').css("display", "block");
                    $('#lblClientName').text(data.clientName);
                    $('#lblClientCompanyName').text(data.companyName);
                }
            })
        } else {

            $('#client_details').css("display", "none");
        }   
    }
    });
});


    **php file**

            <?php   

        require_once 'core.php';

        $clientName = $_POST['clientName'];

        $sql = "SELECT * FROM client WHERE client_Name = $clientName";
        $result = mysqli_query($con, $sql);
        while($row = mysqli_fetch_array($result))
         { 
            $data['clientName'] = $row['client_Name'];
                $data['companyName'] = $row['client_Company_Name'];
                $data['companyAddress'] = $row['client_Company_Address']; 
        } 

        $con->close();

        echo json_encode($data);
        ?>

    **db connection file** 


        <?php   

        $localhost = "localhost";
        $username = "root";
        $password = "admin";
        $dbname = "stock";

        // db connection
        $con = new mysqli($localhost, $username, $password, $dbname);
        // check connection
        if($con->connect_error) {
          die("Connection Failed : " . $con->connect_error);
        } else {
        //   echo "Successfully connected";
        }

        ?>

Answer 1

Hi **Harish**,

Use the options for autocomplete to get the required output. Try 'select' in the autocomplete.

$( "#clientName" ).autocomplete({
  select: function( event, ui ) {
    // Write the code here
  }
});

This will help you in the desired solution. For more details of the events, http://api.jqueryui.com/autocomplete/