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

Question

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

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

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

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

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

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

自动完成输入的 select 事件不接受用户输入作为参数，但有另外 2 个：event、ui。

所以您正在尝试访问值：ui.item.value，即所选项目的值。

所以这一定是你的问题。

CBroe 在 cmets 中有相同的答案。

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

请务必阅读文档，以便从一开始就知道如何处理这种情况。 希望这会有所帮助。

Answer 2

将输入框中的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 3

使用输入类型按钮：

<input type="button" name="" id="">

并使用其click 事件。输入类型不会提交表单。