使用 jqueryui 的自动完成将 textarea 设置为标签而不是值答案

【问题标题】：setting textarea to label and not value with jqueryui's autocomplete使用 jqueryui 的自动完成将 textarea 设置为标签而不是值
【发布时间】：2014-07-03 11:39:17
【问题描述】：

假设我有一个名称数据库和与这些名称相对应的 ID。我想要一个文本区域（以及input type="text"）根据名称自动完成，但也填充标签而不是文本区域中的值。我认为可以通过隐藏的输入字段设置该值。

我如何在 jquery 中做到这一点？

这是我的意思的一个例子（不起作用 - 不知道为什么）：

http://jsfiddle.net/mMa7d/

如果确实有效，它将填充数字而不是文本区域中的名称。

【问题讨论】：

标签： jquery jquery-ui autocomplete

【解决方案1】：

您可以使用$.map 获取名称，

var data = [{
    label: "John Doe",
    value: 6
}, {
    label: "Jane Doe",
    value: 7
}];
$(function () {
    $("#names").autocomplete({
        source: $.map(data, function (value, key) {
            return {
                value: value.label
            };
        })
    });
});

Demo

编辑

 $("#names").autocomplete({
     source: function (request, response) {
         $.getJSON("your url here", function (data) {
             response($.map(data, function (value, key) {
                 return {
                     value: value.label
                 };
             }));
         });
     }
 });

【讨论】：

如果源是 URL 而不是数组怎么办？还有一个问题是如何填充隐藏的输入字段..
自动完成使用 ajax 来获取名称/值。如果我想做的只是让名称显示在文本区域中，我可以只返回名称。但这不是我想要的。我希望名称出现在文本区域中，但我也希望值出现在隐藏的输入区域中。我提交的表单需要 ID，而不是名称。但是，如果可以自动预测名称，它会让生活更轻松。
太棒了-谢谢！我必须将 request.term 附加到 url 以根据输入的内容返回名称，但这很容易。谢谢！