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

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'
    }
 });
 ....

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