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

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";
        }

        ?>

2个回答



  Hi ** Harish **,

使用自动完成选项获取所需的输出。 在自动完成中尝试“选择”。

$(“#clientName”)。autocomplete({
select:function(event,ui){
//在此处编写代码
}
});

这将帮助您获得所需的解决方案。 有关活动的更多详情,请访问http://api.jqueryui.com/autocomplete/


</ div>

展开原文

原文

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/

duanjiu1003
duanjiu1003 在select中,您使用文本框的值而不是使用具有所选值的变量'ui',该值需要发布到PHP文件中。
2 年多之前 回复
dongshi1102
dongshi1102 谢谢你的帮助,但代码不工作..我编辑我的代码看看我做错了什么
2 年多之前 回复



对于详细的答案,我尝试使用随机值的源代码。 </ p>

 &lt; script type =“text / javascript”&gt; 
$(document).ready(function(){
var availableTags = [
“PHP” ,
“Python”,
“Ruby”,
“Scala”,
“Scheme”,
“AngularJS”,
“jQuery”
];
$(“#clientName”)。 autocomplete({
source:availableTags,
select:function(event,ui){
console.log(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(”d isplay“,”block“);
$('#lblClientName')。text(data.clientName);
$('#lblClientCompanyName')。text(data.companyName);
}
})\ n} else {

$('#client_details')。css(“display”,“none”);
}
}
});
});
&lt; / script&gt; \ n </ code> </ pre>
</ div>

展开原文

原文

For the detailed answer, I've tried with the source with random values.

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐