CODEWITHSUNDEEP
jqueryjsonjquery-uijquery-ui-autocomplete
Pouya
Pouya

Reputation: 1918

How to use jQuery UI autocomplete in asp.net

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

Upvotes: 1

Views: 4349

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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

Upvotes: 2

Salman Arshad
Salman Arshad

Reputation: 272086

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

Upvotes: 1

SurinderBhomra
SurinderBhomra

Reputation: 2199

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.

Upvotes: 2

Related Questions