CODEWITHSUNDEEP
jqueryjquery-autocomplete
pal
pal

Reputation: 1242

JQuery Autocomplete using ASP.Net webservice

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!

Upvotes: 1

Views: 1160

Answers (2)

Naveed Butt
Naveed Butt

Reputation: 2901

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

Upvotes: 0

Cheeso
Cheeso

Reputation: 192487

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.

Upvotes: 1

Related Questions