jQuery的自动完成格式化结果数据 [英] Formatting data for jQuery Autocomplete results

问题描述

我有一些数据，我的格式是这样的：

I have some data which I am formatting like this:

 // ... imagine populating a SqlDataReader with some results ...
 var results = new StringBuilder();
 while (reader.Read())
 {
     results.AppendFormat("{0}, {1}\n", reader["name"], reader["emailAddress"]);
 }
 return results.ToString();

我的控制器动作是pretty简单：

My controller action is pretty simple:

 public ActionResult Find(string q)
 {
     var users = Customer.Search(q);
     return Content(users);
 }

和我在视图中的javascript如下：

And my javascript in the view looks like this:

 $(document).ready(function() {
     $("input#user").autocomplete('<%= Url.Action("Find", "Customer") %>', {
         minChars: 2,
         width: 500,
         matchContains: true,
         autoFill: false,
         formatItem: function(row, i, max) {
             return i + "/" + max + ": (" + row[0] + ") " + row[1];
         },

         formatMatch: function(row, i, max) {
             return row[0];
         },

         formatResult: function(row) {
             return row[1];
         }
      });
    });

问题A 的

Question A

我使用从here\">自动完成的。在这一点上我有一个问题，我不能让这两个领域来读取作为单独的值。例如，如果一个行名称字段是约翰和它的电子邮件领域的[e-mail]我希望那些行[0]分别为[1]显示和行。然而，他们目前我得到约翰，[e-mail]行[0]和行[1]是不确定的。

I am using the Autocomplete from here. At this point I am having an issue where I cannot get the two fields to read as separate values. For example, if a rows name field is "John" and its email field "[e-mail]" I would expect those to show up in row[0] and row[1] respectively. However, they currently I get "John, [e-mail]" in row[0] and row[1] is undefined.

什么我需要改变（无论是在JavaScript或在那里我建立了字符串中的方法）来获取行[0]和行[1]，以显示正确的数据？

What do I need to change (either in the javascript or the method where I'm building the string) to get row[0] and row[1] to show the proper data?

问题B 的

Question B

我想preFER有名为行的数据。我的意思是：

I would prefer to have the data in the rows named. By this I mean:

 formatItem: function(row, i, max) {
     return i + "/" + max + ": (" + row.name + ") " + row.email;

我挣扎了一会儿格式化我的数据，因此这会发生，但我从来没有成功。我将如何格式化我的数据，以便自动完成就会明白这一点？

I struggled for a while to format my data so this would happen but I was never successful. How would I format my data so that the AutoComplete would understand this?

推荐答案

如果您创建了姓名和电子邮件属性的类的结果列表，然后返回它作为JSON，那么我认为这会工作，你想要的方式到

If you create a list of results of a class with Name and Email properties, then return it as JSON, then I think it will work the way you want it to.

中级班

public class AutocompleteResult
{
    public string Name { get; set; }
    public string Email { get; set; }
}

搜索code：

var results = new List<AutocompleteResult>();
while (reader.Read())
{
    results.Add( new AutocompleteResult
                     {
                         Name = reader["name"],
                         Email = reader["email"]
                     });
}
return results;

动作：

public ActionResult Find(string q)
{
    var users = Customer.Search(q);
    return Json(users);
}

查看：

我想......最关键的区别是解析方法和数据类型时，你可能需要调整的解析方法等。人。得到格式化的权利。你也许能够摆脱formatResult / formatMatch的，但我不知道。我不使用这些和我记得我在做什么在解析正确设置值。我试图保持基本的code，但正如我所说，我不使用所有你深入做并没有探讨它们的方法。

I think... the key difference is the parse method and the dataType, you might have to adjust the parse method, et. al. to get the formatting right. You might be able to get rid of formatResult/formatMatch, but I'm not sure. I don't use these and as I recall what I'm doing in parse sets the values properly. I'm trying to keep your basic code, but as I said I don't use all the methods that you do and haven't explored them in depth.

$(document).ready(function() {
    $("input#user").autocomplete('<%= Url.Action("Find", "Customer") %>', {
        dataType: 'json',
        minChars: 2,
        width: 500,
        matchContains: true,
        autoFill: false,
        parse: function(data) {
           var array = new Array();
           for (var i = 0; i < data.length; ++i) {
              var datum = data[i];
              array[array.length] = {
                          data: datum,
                          value: datum.Name,
                          result: dataum.Email
              };
           }
        }
        formatItem: function(data, i, max) {
            return i + "/" + max + ": (" + data.Name + ") " + data.Email;
        },
        formatMatch: function(data, i, max) {
            return data.Name;
        },
        formatResult: function(data) {
            return data.Email;
        }
     });
});

这篇关于jQuery的自动完成格式化结果数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！