Question

我想在使用json数组ajax函数选择jquery自动完成输入后显示行详细信息我有自动完成的ui代码 jquery autocomplete is not working with php mysql。我尝试扩展其功能但失败了。这是我的尝试。感谢阅读和帮助

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

Answer 2

对于详细的答案，我尝试使用随机值的源代码。

<script type="text/javascript">
    $(document).ready(function () {
        var availableTags = [
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme",
              "AngularJS",
              "jQuery"
            ];
        $("#clientName").autocomplete({
            source: availableTags,
            select: function( event, ui ) {
                console.log(ui); // It has the value which we selected
            var clientName = $('#clientName').val(); // It shows the value which we entered
            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");
            }   
        }
        });
    });
</script>

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

2 个答案: