使用 Ajax XML 自动完成

Question

我想对我的输入字段进行自动填充。 所有数据都从我的数据库中获取并使用我的 autocomplete.php 文件进行处理——它工作正常，并将所有匹配的列存储在一个 XML 文件中，该文件被发送回服务器。 Onkeyup i GET 使用 q=“键入的字符串”发送到自动完成。

当从服务器接收到 XML 文件时，我无法处理它。我的计划是将所有匹配的结果附加到我的数据列表中，这将作为自动完成？
这是我的代码：

<input id="showCustomerId" name="customer" type="text" min="1" max="100" list="customerlist" required>
<datalist id="customerlist"></datalist>

脚本：

$("#showCustomerId").on('keyup', function(){
                var str = document.getElementById('showCustomerId').value;
                var xmlhttp;
                if (str.length===0) {
                    document.getElementById("customerlist").innerHTML="";
                    return;
                }
                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 (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        var docroot= xmlhttp.responseXML.documentElement;
                        var customers = docroot.getElementsByTagName('customer');
                        for(var i=0; i<customers.length; i=i++){
                            var option = customers[i].firstChild.nodeValue;
                            $("#customerlist").append("<option value=\"" +option+ "\">");
                        }
                    }
                }
                xmlhttp.open("GET","ini/search-customers.php?q="+str,true);
                xmlhttp.send();
            });

自动完成.php

$q=$_GET['q'];
$result = // do query;
$xml = new SimpleXMLElement('<xml/>');
while($row = mysqli_fetch_assoc($result)){
    $xml->addChild("customer",$row['customer_id']);
}
header('Content-type:text/xml');
print($xml->asXML());

现在我的问题是没有得到值，当我在 xml 处理函数中提醒结果时，我得到了正确的值，但是当我像这里一样执行代码时，我的网站冻结了！ 我得到了这些值，但我无法以正确的方式将它们附加到我的数据列表中？

Answer 1

我想构建自动完成最简单的方法是使用 jQuery Autocomplete 或 Twitter Typehead。所以简单的jquery更适合这种情况。在头部添加 jQuery 最新版本 代码未经测试。

$(document).ready(function(){
//Assuming #customerlist is the ID of the text box which you need to see autocomplete
//No need to get value also - by default
$("#customerlist").autoComplete({source:"ini/search-customers.php"});

// Same time autocomplete send term as default GET variable

});

在服务器端 - search-customers.php

$q=$_GET['term'];
$result = // do query;
$json = new Array();
while($row = mysqli_fetch_assoc($result)){
    $json[] = $row['customer_id'];
}
header('Content-type:application/json');
echo json_encode($json);