Question

我有一个复杂的自动完成问题。这是我正在处理的网站的消息传递系统。我想让它在你输入用户名字的地方工作，它会带着他们图像的拇指和他们的名字以及他们的身份。然后，当你选择它时，我希望它显示用户名，但是当它回发时我希望它发回他们的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的情况下获取ID的任何想法？

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

Answer 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...
    });

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

显然，直接从自动填充“结果”发布仅适用于非常具体的情况

Answer 2

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

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

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

Answer 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的自动完成小部件，因为它基于Jörn的小部件，但尚未对其进行测试。

Jquery，使用json自动完成，id为vs显示值

3 个答案: