1

我是 jQuery UI 的初学者，我想使用自动完成 jQuery UI，我写了这段代码：

 <script type="text/javascript">

        $(function () {



            $("#Text1").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Handler.ashx",
                        dataType: "json",
                        data: { term: request.term },
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {

                            response($.map(data.d, function (item) {
                                return {
                                    label: item.Label,
                                    value: item.Value

                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 1
            });
        }); 


</script>

和 HTML 代码：

  <input id="Text1" type="text" />

和自动完成处理程序：

public void ProcessRequest(HttpContext context)
{

    List<Customer> cuslist = new List<Customer>();
    Customer cus = new Customer(1, "Mohsen");
    cuslist.Add(cus);
    cus = new Customer(2, "aa");
    cuslist.Add(cus);

    cus = new Customer(3, "bcb");
    cuslist.Add(cus);

    cus = new Customer(4, "cac");
    cuslist.Add(cus);

    cus = new Customer(5, "daad");
    cuslist.Add(cus);

    cus = new Customer(6, "ffaa");
    cuslist.Add(cus);

    cus = new Customer(7, "vvaav");
    cuslist.Add(cus);

    string name = context.Request.QueryString["term"];
    var items = cuslist.Where(c => c.Name.Contains(name));
    var list = new List<AutoComplete>();
    foreach (var item in items)
    {
        var i = new AutoComplete {Id = item.Id, Label = item.Name, Value = item.Name};
        list.Add(i);
    }
    string ss = JsonConvert.SerializeObject(list);
    context.Response.Write(ss);
}

和自动完成类：

public class AutoComplete
{
    public int Id { get; set; }
    public string Label { get; set; }
    public string Value { get; set; }

}

和客户类别

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Customer(int id,string name)
    {
        Id = id;
        Name = name;
    }
}

但是当在文本框中写入不起作用但从客户端发送的数据是真实的

在此处输入图像描述

但数据不显示。请帮助我。谢谢大家

4

3 回答 3

3

我相信您需要在自动完成代码旁边使用 jQuery ajax，就像本文描述的那样： http: //www.dotnetcurry.com/ShowArticle.aspx ?ID=515 。

此外，您需要将自动完成处理程序指向一个方法。我没有使用 ashx，而是倾向于使用 Web 服务 (.asmx) 文件。

于 2012-04-23T08:16:22.323 回答
3

如果我没看错：

success: function (data) {
    response($.map(data.Id, function (item) {
        return {
                  value: item.Value
               }
    }))
},

应该：

success: function (data) {
    response($.map(data, function (item) {
        return {
                 label: item.Label
                 value: item.Value
               }
    }))
},

在这种情况下，您对您dataFilter:...没有任何帮助。

编辑：如果您使用的是 asp.net，请使用此转换器：

converters: {
    "json jsond": function(msg) {
        return msg.hasOwnProperty('d') ? msg.d : msg;
    }
},

处理data.d

EDIT2：基于最近的帖子：更改为使用它（exaclty as here）：注意 jsonp、转换器和成功处理程序更改以及 dataFilter 删除。

$("#Text1").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "Handler.ashx",
            dataType: "jsonp",
            data: {
                term: request.term
            },
            contentType: "application/json",
            converters: {
                "json jsond": function(msg) {
                    return msg.hasOwnProperty('d') ? msg.d : msg;
                }
            },
            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        label: item.Label,
                        value: item.Value
                    }
                }))
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 1
});
于 2012-04-23T12:22:18.257 回答
2

我查看了您发布的屏幕截图，然后注意到了这一行：

response($.map(data.d, function (item) {

然后回到截图才发现JSON结果不包含.dproptery。也许这就是问题所在。

PS：您也必须在错误事件中调用响应函数（参见本页倒数第二段）。

于 2012-04-23T13:55:50.100 回答