Jquery，使用 json 的自动完成，id 的 vs 显示值答案

【问题标题】：Jquery, Autocomplete using json, id's vs display valuesJquery，使用 json 的自动完成，id 的 vs 显示值
【发布时间】：2010-02-05 21:26:28
【问题描述】：

我遇到了一个复杂的自动完成问题。这是用于我正在开发的网站的消息传递系统。我希望它在您输入用户名的地方工作，它会返回他们的图像、他们的名字和他们的 ID 的拇指。然后，当您选择它时，我希望它显示用户名，但是当它回发时我希望它发回他们的 ID（因为用户名不是唯一的）。

我从http://blog.schuager.com/2008/09/jquery-autocomplete-json-apsnet-mvc.html 开始作为一种方法。但是，我使用 Stackoverflow 中的 tageditor.js 作为扩展器，只是因为我喜欢它的工作原理。

标签编辑器链接如下。我认为这是一个旧版本。

我们使用的是 MVC 1.0。这是我的代码：

public ActionResult Recipients(string prefix, int limit)
        {
            IList<UserProfile> profiles = profileRepository.GetUsers(prefix, limit);

            var result = from p in profiles
                         select new
                         {
                             p.ProfileId,
                             p.FullName,
                             ImageUrl = GetImageUrl(p)
                         };

            return Json(result);
        }

这是页面上的脚本

<script type="text/javascript">
$(document).ready( function() {  
    $('#recipients').autocomplete('<%=Url.Action("Recipients", "Filter") %>', {      
        dataType: 'json',      
        parse: function(data) {
            var rows = new Array();          
            for(var i=0; i < data.length; i++) {
                rows[i] = { data: data[i], value: data[i].ProfileId, result: data[i].FullName };
            }          
            return rows;      
        },      
        formatItem: function(row, i, n) {
            return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.FullName + '</td></tr></table>';
        },      
        max: 20,
        highlightItem: true,
        multiple: true,
        multipleSeparator: ";",
        matchContains: true,
        scroll: true,
        scrollHeight: 300
     });
});
</script>

所以，回调起作用了，我的列表显示图像和用户名，当我选择一个时，它将用户的全名放在带有分隔符的文本框中。但是，当我提交表单时，只会发回姓名，而不会发回个人资料 ID。关于如何在不显示在文本框中的情况下获取 ID 的任何想法？

编辑：这是我正在使用的 tageditor.js 版本http://www.gotroleplay.com/scripts/tageditor.js

【问题讨论】：

标签： jquery asp.net-mvc model-view-controller jquery-plugins autocomplete

【解决方案1】：

我知道这很糟糕，但我总是要么 (a) 从结果处理程序中发布数据（不是 formatResult，据我了解，它只是格式化结果以放入文本框，或者 (b) 粘贴隐藏字段中的值 - 再次来自结果处理程序 - 用于发布。

    $('#recipients').autocomplete({options})
     .result(function(event, data, formatted) {
         $("#hidden_field").val( data.ProfileId );
// or just post the data from in here...
    });

什么的。如果您找到更好的方法，请告诉我们...

显然，直接从自动完成“结果”发布仅适用于非常特定的场景

【讨论】：

这就是我认为我必须要做的事情。真可惜。我试试看。
我一直在玩弄实际的自动完成选择控件，这些控件的样式看起来像自动完成文本框，这样 id 就“自然”地在那里，但我没有得到它想要的地方它还
@Sweet Nicky，你有没有完成过创建自动完成选择控件的项目，使它看起来像一个文本框，但通过 json 加载了选项？我也在找这个。

【解决方案2】：

我认为您需要一个 formatResult。这就是我用于发送回服务器的内容。我认为它看起来像：

formatResult(row, i, n) {
    return row.value;
}

如果“值：data[i].ProfileId”是您要发送的内容。

【讨论】：

我试过 formatResult: function(row, i, n) { return row.ProfileId;并且它仍然在提交时返回全名。我也尝试了 row.value 并得到了相同的结果。

【解决方案3】：

这个答案迟了将近一年，但我已经对其进行了测试并且效果很好。

在尝试了很多方法并在 SO 访问这个问题之后，我终于找到了显示值但发送 ID 的最佳解决方案。

分步说明

1- 从 GitHub 存储库获取 Jörn 的自动完成 jQuery 插件 的“最新”版本（官方版本已合并到 jQuery UI，但一些开发人员仍在维护和更新“独立”插件）此处：jQuery AutoComplete Plugin (GitHub repository)

2- 使用这样的 JS 数组（也可以使用 AJAX 方式）：

var categories = [
 { name: "Lawyer", id: "1" },
 { name: "Driver", id: "2" },
 { name: "Dentist", id: "3" },
];

3- 使用这个 JavaScript 函数来初始化插件：

$("#category").autocomplete(categories, {
    formatItem: function(row, i, max) { return row.name; },
    formatMatch: function(row, i, max) { return row.name; },
    formatResult: function(row) { return row.name; }
});
$("#category").result(function(event, data, formatted) {
    $("#category_id").val(data["id"]);
});

4- 在表单中添加另一个隐藏字段，例如：

<input type="text" id="category" />
<input type="hidden" id="category_id" name="category_id" value="" />

PS：您也许可以使用 jQuery UI 的 Autocomplete 小部件，因为它基于 Jörn 的小部件，但尚未对其进行测试。

【讨论】：