Question

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

我从服务器收到XML文件时遇到问题。我的计划是将所有匹配的结果附加到我的datalist，它将作为自动完成工作吗？这是我的代码：

<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();
            });

autocomplete.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

});

在serverside - 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);

使用Ajax XML自动完成

1 个答案: