jqueryui使用ajax响应自动完成 - jqueryui autocomplete with ajax response

jqueryui autocomplete with ajax response

本文关键字：响应使用 ajax jqueryui | 更新日期: 2024-04-24

我试图在ajax中获得对JqueryUi自动完成的响应，但我无法在下拉框中获得结果。这是脚本=>

$(function(){
    $("#user_key" ).autocomplete({
        source: function(){
            var http = false;
            if (window.XMLHttpRequest){
                http = new XMLHttpRequest();
            } else {
                http = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (http){
                http.open("POST","./ajax/autocomplete.php",true);
                http.onreadystatechange = function(){
                    if (http.status==200 && http.readyState==4){
                        this.value = http.responseText;
                    }
                };
                http.send(null);
            }
        },
        close: function(){
        }
    });
});

为了简化示例，在autocomplete.php中只写<?php echo "hello"; ?>我如何在下拉框中获得这个"你好"，以及为什么需要使用脚本底部的close:函数，谢谢：）

PS。我认为我在编写this.value=http.responseText时犯了错误，例如，在编写警报（http.responceText）时，它从.php文件中得到结果。我如何在下拉框中指示结果？

根据文档和我所做的一些测试，您只需要使用php脚本的url设置source属性。

jQuery UI代码将querystring中的term参数发送到您在其中指定的url：source.php?term=hello

因此，在您的示例中，如果您在PHP脚本中正确处理querystring参数，则以下内容应该有效，该脚本应该返回一个JSON数组。

$(function(){
    $("#user_key" ).autocomplete({
        source: "./ajax/autocomplete.php",
        minLength: 2
    });
});

返回的JSON数据应具有以下格式：

[{ "id" : "Item1", "label" : "Item1", "value" : "Item1" }, 
{ "id": "Item2", "label" : "Item2", "value" : "Item2" }]