javascript - jQuery 将自动完成结果放入文本区域

Question

我有一个 input 值，其中包含 id word 和一个如下所示的 jQuery 函数:

$(function() {
var availableTags = ["register", "malloc", "device", "apre", "fallo"];
$("#word").autocomplete({
source: availableTags
});
});

当我在输入中键入文本时，将调用 jQuery 函数，并显示结果。您可以在这里看到一个示例:

我输入了“al”，它显示了包含这些字母的所有单词(在数组中)。这里很好，但我的问题如下。我希望结果显示在 textarea 中，而不是作为列表。

这意味着 malloc 和 fallo 必须位于文本区域内。

你有什么建议吗？您可以找到带有完整代码的 fiddle here .

Answer 1

Here是一个 fiddle ，它将隐藏自动完成菜单项并使用返回的项目更新文本区域。请注意，菜单仍然存在，只是隐藏，以免破坏自动完成小部件。这个想法是使用小部件的响应方法来加载具有适当值的文本区域。请注意，这将隐藏页面上的所有自动完成菜单，并且当用户清除输入中的所有 tet 时不会清除文本框，但它应该给您一个开始。

隐藏自动完成菜单项的 CSS:

.ui-autocomplete li { display: none; }

用于获取文本区域响应的附加代码:

$( "#word" ).autocomplete({
            source: availableTags,
            response: function( event, ui ) {
                $("#testo").val(ui.content.map(function(d) { 
                    return d.label; 
                }).join("\n"));
            }
        });