如何使用ajax在html输入框中显示mysql数据？

Question

我正在创建一个简单的接单页面。我想要的是何时开始在“选择客户”输入框上键入内容，基于我的按键结果过滤的结果将显示在输入框下方。

由于我是该领域的新手，因此您的建议会受到高度赞赏。

这是我的JavaScript代码：

function showCustomer(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","searchcustomer.php?q="+str,true);
        xmlhttp.send();
    }
}

这是我的搜索客户PHP代码

 $q=$_GET["q"];

 define('HOSTNAME', 'localhost'); 
 define('USERNAME', 'root'); 
 define('PASSWORD', ''); 
 define('DBNAME', 'order'); 



    $conn = new mysqli(HOSTNAME, USERNAME, PASSWORD, DBNAME);
    $sql = "SELECT cusname, cusarea, cusadd1,cusadd2,cusadd3,cuscity,cuspin,cusoldbal FROM tbl_customer where cusname like '%".$q."%'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()){
    $data = $row['cusname'];

    }
        echo $data;
                                }
    else
    {
        echo 'No Mach Found...';
    }


    $conn->close();

这是我的HTML输入文件：

<h4>Order To</h4>
<div class="form-group">
<input type="text" class="form-control autocomplete_com" data-type="clientCompanyName" name="clientCompanyName" id="clientCompanyName" placeholder="Select Company"  onkeyup="showCustomer(this.value)">
</div>
<div id="txtHint"></div>

这个div txtHint不能正常工作，我只希望结果在我的输入框下面并且也可以选择.....什么是最好的方法？