自动完成“设置”，jquery答案

【问题标题】：Autocomplete "setup", jquery自动完成“设置”，jquery
【发布时间】：2009-10-02 16:41:48
【问题描述】：

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

gMeds = 新数组（）； $(文档).ready(函数(){ var autoComp = setUpAutoComplete(); 如果（自动补偿）{ $("#med").autocomplete(gMeds); } 别的 { alert('自动完成不可用'); } }); 功能 setUpAutoComplete() { $.ajax({ url: "ajax-getAllMeds.php", 异步：假，类型：“获取”，数据类型：“文本”，成功：函数（结果）{ gMeds = JSON.parse(结果); 返回真； }, 错误：函数（XMLHttpRequest，textStatus，errorThrown）{ 警报（文本状态）；返回假； } }); }

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

生成的 JSON 是

{ “药物”：[ { “名称”：“王牌” }, { “名称”：“危险” } ] }

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

【问题讨论】：

标签： jquery arrays autocomplete

【解决方案1】：

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

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

准备好你的 .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。

如果这能解决您的问题，请告诉我。

【讨论】：

老兄！这完全解决了问题！我有你建议的大部分内容，除了我通过将其设为 JSON 对象而不必要地使其复杂化。谢谢你的帮助！！
是的，不需要设置 ajax/json。插件使用 .autocomplete() 在后台为您完成所有这些工作，我最初也做了同样的事情

【解决方案2】：

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

gMeds = JSON.parse(result).meds;

您还应该将代码移动到成功方法中。

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

【讨论】：