javascript - jQuery将自动完成结果放入textarea

Question

我有一个input具有 idword和 jQuery 函数的值，如下所示：

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

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

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

这意味着malloc并且fallo必须在文本区域内。

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

Answer 1

这是一个小提琴，它将隐藏自动完成菜单项并使用返回的项目更新文本区域。请注意，菜单仍然存在，只是被隐藏了，以免破坏自动完成小部件。这个想法是使用小部件的响应方法来加载具有适当值的文本区域。请注意，这将隐藏页面上的所有自动完成菜单，并且当用户清除输入中的所有 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"));
            }
        });

Answer 2

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

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