自动完成“设置”，jquery

Question

我正在尝试使用我正在构建的简单应用程序自动完成工作。到目前为止，这是我的代码：

gMeds = new Array();

$(document).ready(function(){   
    var autoComp = setUpAutoComplete();
    if(autoComp) {
        $("#med").autocomplete(gMeds);
    }
    else {
        alert('Autocomplete unavailable');
    }

});

function setUpAutoComplete() {
    $.ajax({
        url: "ajax-getAllMeds.php",
        async: false,
        type: "GET",
        dataType: "text",
        success: function(result){
            gMeds = JSON.parse(result);
            return true;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            return false;
        }
    });
}

“ajax-getAllMeds.php”的源生成有效的 JSON（由 http:// /www.jsonlint.com/）。

生成的 JSON 是

{
    "meds": [
        {
            "name": "ace"
        },
        {
            "name": "danger"
        }
    ]
}

我想要完成的是将我的 JSON 转换为 JavaScript 数组，然后使用该数组作为我的单词池“自动完成”的基础。我还差得远吗？我遇到了各种问题。

Answer 1

几天前，我在 jquery 自动完成方面遇到了同样的问题，以至于我考虑使用脚本自动完成，但事实证明它比我想象的要容易得多 - 对我的所有拉扯感到有点惊讶经历过:)

事实证明，这就是你所需要的，说真的......如果你遇到问题，请回复我，我会尽力与你一起解决。

准备好您的 .php 文件。就我而言，我将其称为“list.php”
我的表称为列表，有字段 id 和 name。我只检索名称。这些名称将填充可选选项。

请注意，用户在输入框中键入的内容将作为“q”传递。这就是您在下面代码的第 2 行中看到的 $_GET['q']。如果需要，您可以覆盖/重命名它，但最好不要打扰。请注意，它也与输入字段本身的名称无关。

另请注意，jquery 自动完成需要“\n”将结果分隔为独立可选择的选项。如果您不连接“\n”，它将全部输出为单个可选选项。

//start with database connection of course
$rs = mysql_query("SELECT * FROM lists WHERE name LIKE '%" . $_GET['q'] . "%'");


while($row = mysql_fetch_assoc($rs)) {
    echo $row['name'] . "\n";
}

准备好您的输入字段。就我而言，我将其称为 name="myinputfield" 但这并不重要，因为名称并不重要，重要的是 id="searchterm"

<input name="myinputfield" type="text" id="searchterm" size="30" maxlength="100" />

然后在您的 .js 文件中，包括以下内容：

$("#searchterm").autocomplete("list.php");

我做了一些额外的事情样式等，因为我对默认样式不满意，但这就是实现功能所需的全部。最重要的一点是在脚本中使用 $_GET['q'] 并在 js 中定位 #searchterm id。

让我知道这是否可以解决您的问题。

Answer 2

您应该尝试的第一件事是：

gMeds = JSON.parse(result).meds;

您还应该将代码移至 success 方法中。

$(document).ready(function(){   
    setUpAutoComplete();
});

function setUpAutoComplete() {
    $.ajax({
        url: "ajax-getAllMeds.php",
        async: false,
        type: "GET",
        dataType: "text",
        success: function(result){
            var json = JSON.parse(result);
                if (!json || !json.meds) {
                    alert('invalid');
                }
                $("#med").autocomplete(json.meds);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
            return false;
        }
    });
}