JQuery Autocomplete using ASP.Net webservice

Question

I have ASP.Net webservice being called in JQuery and the response in the drop down comes in JSON format. Below is the snippet

$(document).ready(function () {
$("#txtTest").autocomplete({ 
     source: function (request, response) {  
         $.ajax({  
             type: "POST",  
             contentType: "application/json; charset=utf-8", 
             url: "Webservice.asmx/GetNames",
             data: "{'prefix':'" + request.term + "'}",  
             dataType: "json",  
             async: true,  
             success: function (data){  
                response($.map(data, function(item)
                { 
/*Below commented return has to display the First item alone in JSON which fails*/
//return { label: item.First, value: item.First } 
 /* Below return gives the JSON response with first and second*/
      return item ; 
               }));  
            },  
            error: function (result) {  
               alert("Due to unexpected errors we were unable to load data");  
            }  
         });
     },  
     minLength:2
 });
 });

And the JSON response on the drop of auto-complete comes as

{"First":"Steve","Second":"AK"}
{"First":"Evet","Second":"EV"}
{"First":"Stevens","Second":"SV"}

How do i display the "First" items alone (Like Steve, Evet, Stevens) as the output of the drop down auto-complete?

Please help me!

The "JSON response", as you've described it, is not valid JSON. If that is what your service is returning, it's wrong. That text represents 3 distinct Javascript objects. Any of the three lines, taken alone, is valid JSON. With those lines concatenated all together, it is not valid JSON. So if that is an accurate picture of the response, your service is broken. Fix that first, then we can answer the question. — Cheeso
– Cheeso, Commented Oct 12, 2011 at 13:53

Cheeso · Accepted Answer · 2011-10-13 15:40:46Z

The "JSON response", as you've described it, is not valid JSON. If that is what your service is returning, it's wrong. That text represents 3 distinct Javascript objects. Any of the three lines, taken alone, is valid JSON. With those lines concatenated all together, it is not valid JSON.

This is valid JSON representing an array of three objects:

[{"First":"Steve","Second":"AK"},
 {"First":"Evet","Second":"EV"}, 
 {"First":"Stevens","Second":"SV"} ]

(whitespace doesn't matter)

This is not valid JSON :

{"First":"Steve","Second":"AK"} 
{"First":"Evet","Second":"EV"} 
{"First":"Stevens","Second":"SV"}

So if that is an accurate picture of the response, your service is broken. Fix that first, then we can answer the question.

After you get a response in the proper form, eg,

[{"First":"Steve","Second":"AK"},
 {"First":"Evet","Second":"EV"}, 
 {"First":"Stevens","Second":"SV"} ]

...then you can display the results. But you want to display only the first element of each item in the array. To do that you need to map that original array to a different array, an array of strings rather than an array of objects. You can use the jQuery map() function to do that. It looks like this:

  $.map( realArray, function(val, i) {  ...map one item here...  });

In your success function, with your returned data, you'd use it like this:

        success: function (data){     
            response($.map(data, function(item) {
              return item.First;
            }));
        },

The function that gets called by map, once for each item in the original arrap, transforms an item like {"First":"Steve","Second":"AK} into an item like "Steve". For the entire array like

[{"First":"Steve","Second":"AK"},
 {"First":"Evet","Second":"EV"}, 
 {"First":"Stevens","Second":"SV"} ]

..the output of the call to $.map() is ["Steve", "Evet", "Stevens"]. This result gets passed to the response function, which then displays that list of items in the autocomplete widget.

Hi, i am getting a valid JSON response. ["{"First":"Steve","Second":"AK"}", "{"First":"EVet","Second":"EV"}", "{"First":"Stevens","Second":"SV"}"] Please let me know how to proceed further. Thanks

Naveed Butt · Accepted Answer · 2012-02-15 06:10:43Z

0

I was having the same problem, and I managed to fix it, by replacing the NULL values in the query with some empty strings.

The autocomplete tries to change the JSON to an autocomplete item, but it can't change when database is returning null values through your web service...

answered Feb 15, 2012 at 6:10

Naveed Butt

2,9197 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

JQuery Autocomplete using ASP.Net webservice

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related