How to use jQuery UI autocomplete in asp.net

Question

I'm starter in jQuery UI, I Want to Use autocomplete jQuery UI , I write this Code:

 <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>

and Html Code:

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

and AutoCompleteHandler:

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

and AutoComplete Class:

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

}

and Customer Class

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

but when write in textBox not work but data send from to client is true

enter image description here

but Data Don't show.please Help me. Thanks all

score 2 · Answer 1 · answered Apr 23 '12 at 08:16

2

I believe you need to use jQuery ajax alongside your auto complete code, just like how this article describes: http://www.dotnetcurry.com/ShowArticle.aspx?ID=515.

In addition, you need to point your autocomplete handler to a method. Instead of using a ashx, I've tended to use a web service (.asmx) file instead.

answered Apr 23 '12 at 08:16

SurinderBhomra

2,169
2
24
49

1

@ sbhomra : Can i Use Handler for Fill ??? in this article use Web service but i Want use Handler for Fill. thanks – Pouya Apr 23 '12 at 08:21
2

@Mohsen Bahrzadeh: Yes I you can. But when using the article I've suggested, change this line in your code from "context.Request.QueryString["term"].ToString();" to "context.Request.Form["term"];" – SurinderBhomra Apr 23 '12 at 08:28
1

@Mohsen Bahrzadeh: First thing I can see, is that the line could be causing an issue: data: { term: request.term }. Change it to data: "{ 'term': '" + request.term + "' }". Did you make the change I suggested in my comment above> – SurinderBhomra Apr 23 '12 at 09:58
1

@ sbhomra: dataSend to server in true i see in firebug and server proccss and return data i think this code in correct success: function (data) {response($.map(data.Id, function (item) { return { value: item.Value } })) }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } – Pouya Apr 23 '12 at 10:02
1

@Mohsen Bahrzadeh: "$.map(data.Id" should be "$.map(data.d" – SurinderBhomra Apr 23 '12 at 10:12
1

@ sbhomra: Change But Not Work, I do not know where is the problem of – Pouya Apr 23 '12 at 10:16
1

I can't see what the issue could be from the code you have given me. I personally think there is an issue with your Autocomplete handler. Please ensure it looks something like this: http://stackoverflow.com/a/6629103/1300806 and debug through your .NET code to see where it is failing. – SurinderBhomra Apr 23 '12 at 10:55
1

@ sbhomra: I Edit Question and Add Data Send From Server to Client. – Pouya Apr 23 '12 at 11:03
1

Update the post with your JavaScript code. I wan to double check you have made the changes I have suggested. – SurinderBhomra Apr 23 '12 at 11:14

Mark Schultheiss · Accepted Answer · 2012-04-23T14:24:54.983

If I read this correctly:

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

should be:

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

and your dataFilter:... does nothing for you in this instance.

EDIT: IF you are using asp.net, use this converter:

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

to handle the data.d

EDIT2: Based on most recent post: Change to use this (exaclty as here): NOTE the jsonp, the converter and the success handler change as well as dataFilter removal.

$("#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
});

@ Mark Schultheiss: i'm just edit success function. Mr.Mark i have Question what is a d???? — Pouya, Apr 23 '12 at 12:55
Asp.net version 3.5 and forward returns data as data.d, if you use the converter as I have it, it should work with either 3.5 forward OR prior versions as it automatically detects the .d form making your code independant of the .net version. — Mark Schultheiss, Apr 23 '12 at 13:01
Note that you can avoid the manual serialization with properly decorated server side methods (which servrer side decorations are not shown in your example) Not that that is relevent as your example shows the JSON with which the success handler should process as I have it. — Mark Schultheiss, Apr 23 '12 at 13:03

score 1 · Answer 3 · answered Apr 23 '12 at 13:55

I looked at the screenshot you posted, then noticed this line:

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

then went back to the screenshot only to find that the JSON result does not contain a .d proptery. Perhaps that is the problem.

PS: you must call the response function inside the error event as well (see second last paragraph on this page).

How to use jQuery UI autocomplete in asp.net

3 Answers3