代码之家 › 专栏 › 技术社区 › Josh

jquery,使用json自动完成,id的vs显示值

autocomplete jquery-plugins model-view-controller asp.net-mvc jquery

Josh · 技术社区 · 14 年前

我有一个复杂的自动完成问题。这是我正在工作的一个网站的消息系统。我想让它在你输入用户名的地方工作,它会带着他们的图像、名字和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>

所以,发生的是回叫工作,我的列表显示图像和用户名,当我选择其中一个时,它将用户的全名放在带有delimter的文本框中。但是,当我提交表单时,只发送名称,而不发送配置文件ID。关于如何在不在文本框中显示的情况下取回ID有什么想法吗?

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

3 回复 | 直到 13 年前

SweetNickyC 14 年前

我知道这是站不住脚的,但我总是(a)发布来自结果处理程序的数据(而不是格式化结果,据我所知,格式化结果以放入文本框中),或者(b)将值粘贴到隐藏字段中(同样来自结果处理程序)以进行发布。

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

或者什么的。如果你找到更好的方法请告诉我们…

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

partkyle 14 年前

我想你需要一个格式化结果。这正是我用来发送回服务器的内容。我想应该是这样的:

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

如果要发送“value:data[i].profileid”。

Xavi Esteve 13 年前

这个答案迟了将近一年,但我已经测试过了, 伟大工程 .

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

逐步说明

1-获取的“最新”版本 J_¶RN的自动完成jquery插件 从Github存储库(官方版本已合并到jquery用户界面中,但一些开发人员仍在维护和更新“独立”版本)中,如下所示: 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的自动完成小部件,因为它是基于jquery的,但还没有测试过。