Question

我使用this example从mysql db运行ajax数据查询，返回一个表。

当手动输入文本到此输入表单时，这工作正常，例如：

但搜索表单有一个自动完成的jquery脚本，可以帮助用户。从下拉列表自动完成值中选择值时，不会识别onchange事件，也不会显示任何表格。

我的问题是，我如何在搜索表单的末尾添加一个按钮，将其更改为“onclick”＆＃39;事件，而不是＆＃39; onchange＆＃39;？我面临的障碍是＆＃39; client_address＆＃39;的输入。是更大表单的一部分，单击任何按钮上的提交会导致页面尝试提交整个表单。

create_wt.php：

// autocomplete 
<script type="text/javascript">
    $(function() {
        $( "#clientsearch" ).autocomplete({
            source: 'backend_search_addressWT.php'
        });
    });
</script>
// retrieve data in table
<script>
    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","ajax_get_client_info.php?q="+str,true);
            xmlhttp.send();
        }
    }
</script>


<div class="form-group <?php echo (!empty($client_address_err)) ? 'has-error' : ''; ?>">
    <label>Address</label>
    <div class = "input-group">
        <input id="clientsearch" type="text" name="client_address" onchange="showUser(this.value)" class="input-group form-control" value="<?php echo $client_address; ?>" placeholder="Search by address..."  style="width: 500px;">
        <!---<span class="input-group-btn">
        <button class="btn btn-success" value="submit" id="ajaxbtn" type="submit">Get Client Info</button>
        </span> -->
    </div>
    <br><div id="txtHint"><b>Person info will be listed here...</b></div>
    <span class="help-block"><?php echo $client_address_err;?></span>
</div>

ajax_get_client_info.php：

<?php
    require_once 'config.php';
    $q = trim($_GET['q']);
    $query = $mysqli->query("SELECT * FROM client WHERE client_address LIKE '%".$q."%'");


    //$data = array();

    //while ($row = $query->fetch_assoc()) {
        // $data[] = ($row);
    //}

    //echo json_encode($data);

    echo "<table>
    <tr>
    <th>client_id</th>
    <th>Client Name</th>
    <th>Phone Number</th>
    </tr>";
    while($row = mysqli_fetch_array($query)) {
        echo "<tr>";
        echo "<td>" . $row['client_id'] . "</td>";
        echo "<td>" . $row['client_name'] . "</td>";
        echo "<td>" . $row['client_phone'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";

?>

编辑：

create_wt：

<script type="text/javascript">
$(function() {
 $( "#clientsearch" ).autocomplete({
            select: function showUser(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","ajax_get_client_info.php?q="+str,true);
                xmlhttp.send();
            }
}
 }
 {
  source: 'backend_search_addressWT.php'
 });
});
</script>

Answer 1

将输入框中的 onchange 更改为 onkeyup ，应该解决，onchange主要用于单选按钮和复选框。

<input id="clientsearch" type="text" name="client_address" onkeyup="showUser(this.value)" class="input-group form-control" value="<?php echo $client_address; ?>" placeholder="Search by address..."  style="width: 500px;">

Answer 2

使用输入类型按钮：

<lable>End Date</lable><input type="date" class="form-control" name="to" ng-bind="getDatetime | date:'yyyy-MM-dd'" ng-model="to">

并使用其<input type="button" name="" id="">事件。输入类型不会提交表单。

Answer 3

根据jQuery UI Autocomplete文档： http://api.jqueryui.com/autocomplete/#event-select

自动填充输入的选择事件不接受用户的输入作为参数，但还有另外两个：事件， ui

因此，您尝试访问值 ui.item.value ，这是所选项目的值。

所以这一定是你的问题。

CBroe 在评论中有相同的答案。

.... function getHint(value) { if ((value !== "") && (typeof value !== 'undefined')) { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if ((this.readyState == 4) && (this.status == 200)) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","ajax_get_client_info.php?q=" + value, true); xmlhttp.send(); return true; // return true to accept the selection of the user } else { document.getElementById("txtHint").innerHTML = ""; $(this).autocomplete( "close" ); // Close the autocomplete popup manual because by returning false negates the selection but it does not close the popup. return false; // return false to negate the selection of the user } } $( "#clientsearch" ).autocomplete({ select: function showUser(event, ui) { return getHint(ui.item.value); }, change: function showUser(event, ui) { return getHint(ui.item.value); }, { source: 'http://www.example.com' } }); ....

请务必阅读文档，以便了解如何从一开始就对待此案例。希望这会有所帮助。

Ajax / PHP - 无法识别自动完成值

3 个答案: