Jquery：带标签的自动完成答案

【问题标题】：Jquery: Autocomplete with labelJquery：带标签的自动完成
【发布时间】：2014-09-21 05:44:25
【问题描述】：

我正在努力学习网站开发。在学习 jquery 的自动完成功能时，我尝试输入标签。

    function autocomplete (data) {
        var data = data.toString();
        var availableTags = data.split(',');
        var autocompleteData = [];
        for (var i = 0; i < availableTags.length; i++){
            autocompleteData[i] = {};
            autocompleteData[i].label = i.toString();
            autocompleteData[i].value = availableTags[i];
        }
        $("#tags").autocomplete({
            source: autocompleteData,
            select: function (event, ui) {
                printautocomplete(event, ui)
            }
        });
    };

autocomplete[i].value 是一个有效的字符串。

 autocompleteData[0]
 Object {label: 0, value: "Peter"}

但是，我没有看到任何建议。我使用 API 的方式有什么问题？

API 说： "数组：数组可以用于本地数据，支持的格式有两种：

An array of strings: [ "Choice1", "Choice2" ]
OR An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。 " 谢谢。

【问题讨论】：

标签： javascript jquery autocomplete

【解决方案1】：

我对您代码中的第 2 行持怀疑态度 (var data = String()data;) 我会使用：var data = data.toString();

但是，如果您确定 autocompleteData 元素确实具有有效的字符串，那么我最好的猜测是您可能忘记将 '#tags' id 提供给您的 html 输入字段元素。

最后，如果不是这样，为了排除故障，我会尝试从您传递给 autocomplete() 的对象中删除 select: 选项，该选项的开头为：$("#tags").autocomplete(...，以便仅传递源选项.

要检查的另一件事是代码何时运行。可能需要一个 document.ready() 函数来确保在将自动完成功能添加到 ID 为 '#tags' 的 DOM 元素时，该元素已经被创建。

【讨论】：

如果我使用“source：availableTags”而不是“source：autocompleteData”，它会完全正常。
代码正在运行，但它会根据标签而不是值自动完成。
是的，它应该将输入的文本与“标签”相匹配，然后在用户提交输入时将相应的“值”发送到页面中接收到的任何内容。您可以通过仅在 autocompleteData 对象中提供“值”来避免这种情况（删除添加带有 i.string 的标签的行）或仅发送字符串选项数组（正如您注意到的那样，无论如何这是 availableTags，所以您可以在初始化之后直接使用这个数组来缩短你的代码。

【解决方案2】：

自动完成功能正常。它没有完成“价值”，而是完成了“标签”。所以当我输入“1”时，它会提示“1”、“10”、“11”等。

Autocomplete applying value not label to textbox 回答如何更改为按值。

【讨论】：

【解决方案3】：

$('#sidebarSearch').autocomplete(
{
source: function(query, result)
    {
    var query = $('#sidebarSearch').val ();
    $.ajax(
        {
        url:"sidebarSearchFetch.php",
        method:"POST",
        data:{query:query},
        dataType:"json",
        success:function(data)
            {
            result($.map(data, function(item)
                {
                return {
                       label: item.name,
                       value: item.usrId
                      };
                }));
            }
        })
    },
appendTo: "#sidebar-form"
});

【讨论】：