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

Mark Schultheiss · Accepted Answer · 2012-04-23 14:24:54Z

2

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

edited Apr 23, 2012 at 14:24

answered Apr 23, 2012 at 12:22

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pouya Over a year ago

@ Mark Schultheiss: i'm just edit success function. Mr.Mark i have Question what is a d????

Mark Schultheiss Over a year ago

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 Over a year ago

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.

Surinder Bhomra · Accepted Answer · 2012-04-23 08:16:22Z

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, 2012 at 8:16

Surinder Bhomra

2,1992 gold badges25 silver badges50 bronze badges

9 Comments

Pouya Over a year ago

@ sbhomra : Can i Use Handler for Fill ??? in this article use Web service but i Want use Handler for Fill. thanks

Surinder Bhomra Over a year ago

@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"];"

Surinder Bhomra Over a year ago

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

Pouya Over a year ago

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

Surinder Bhomra Over a year ago

@Mohsen Bahrzadeh: "$.map(data.Id" should be "$.map(data.d"

|

Salman Arshad · Accepted Answer · 2012-04-23 13:55:50Z

1

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

answered Apr 23, 2012 at 13:55

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Collectives™ on Stack Overflow

How to use jQuery UI autocomplete in asp.net

3 Answers 3

3 Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related