jQuery将自动完成结果放在textarea中

Question

我有一个input值，其id为word，jQuery函数如下：

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

当我在输入中键入文本时，会调用jQuery函数，它会显示结果。在这里你可以看到一个例子：

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

这意味着malloc和fallo必须位于textarea内。

你有什么建议吗？您可以找到完整代码here的小提琴。

Answer 1

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

CSS隐藏自动完成菜单项：

.ui-autocomplete li { display: none; }

获取textarea响应的附加代码：

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

Answer 2

诀窍是覆盖插件的_renderMenu功能。

这是一个快速演示：http://jsfiddle.net/TVq9g/4/