Search jQuery

jQuery Forum

Using jQuery UI

angelchen

autocomplete-remote multiple returns undefined error on json data returned from asp.net 2.0 webservice

in Using jQuery UI • 10 years ago

Hi, I have a hard time getting this one work. please give some hint and I have some deadline to make.

here is the web service

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetJsonMemberCodes(string term)
    {
        suggestions = new List<Members>();

Data dt = new Data();

suggestions = dt.GetJsonMemberCodes(term);

        }
     return new JavaScriptSerializer().Serialize(suggestions);

    }

here is the data the server web service returned.

<?xml version="1.0" encoding="utf-8" ?>

<string xmlns="http://tempuri.org/">[{"ID":"106720","LABEL":"106720","VALUE":"106720},{ID":"106729","LABEL":"106729","VALUE":"106729"}]</string>

here is the page that is calling it

link type="text/css" href="../../App_Themes/css/base/jquery.ui.all.css" rel="stylesheet" />

.ui-autocomplete-loading { background: white url('~/images/ui-anim_basic_16x16.gif') right center no-repeat; }

</style>

function() {

function split(val) {

return val.split(/,\s*/);

}

function extractLast(term) {

return split(term).pop();

}

"input[ID*='txtMemberID']").autocomplete({

// source: function(request, response) {

// $.getJSON("RptMemberIDAutoComplete.asmx/GetJsonMemberCodes", {

// term: extractLast(this.value)

// }, response);

// },

// $.jsonService({url: 'RptMemberIDAutoComplete.asmx',method: '/GetJsonMemberCodes',params: extractLast(this.value)});

// },

source:

function(request, response) {

$.ajax({

type:

"POST",

url:

"RptMemberIDAutoComplete.asmx/GetJsonMemberCodes",

contentType:

"application/json; charset=utf-8",

dataType:

"json",

data:

"{'term': '" + extractLast(this.value) + "'}",

success:

function(result) {alert(result.d);

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

// return {

// ID:item.ID,

// label: item.ID,

// value: item.ID

// }

// }))

}

});

search:

function() {

// custom minLength

var term = extractLast(this.value);

if (term.length < 2) {

return false;

}

focus:

function() {

// prevent value inserted on focus

return false;

select:

function(event, ui) {

var terms = split( this.value );

// remove the current input

terms.pop();

// add the selected item

terms.push( ui.item.value );

// add placeholder to get the comma-and-space at the end

terms.push(

"");

this.value = terms.join(", ");

return false;

}

});

</script>

input id="txtMemberID" size="50" />

Replies(1)

angelchen

Re: autocomplete-remote multiple returns undefined error on json data returned from asp.net 2.0 webservice

10 years ago

figured out myself. this is working version using same web service. parameter needs to be parsed in with .toJson in jquery.json-2.2.min.js downloadable in

http://code.google.com/p/jquery-json/downloads/list

link href="../../App_Themes/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />

script type="text/javascript" src= "../../Scripts/js/jquery-1.4.2.min.js"></script>

script type="text/javascript" src="../../Scripts/js/jquery-ui-1.8.4.custom.min.js"></script>

script type="text/javascript" src="../../Scripts/js/jquery.json-2.2.min.js"></script>

//autocomplete member id

"input[ID*='txtMemberId']").autocomplete({

source:

function(request, response) {

$.ajax({

url:

"../../RptMemberIDAutoComplete.asmx/GetJsonMemberCodes",

type:

"POST",

contentType:

"application/json; charset=utf-8",

data: $.toJSON({

'Mem': extractLast(request.term) }),

dataType:

"json",

success:

function(msg) {

//alert(msg.d);

var data = eval("(" + msg.d + ")");

response(

$.map(data,

function(item) {

return {

label: item.ID +

" | " + item.NM,

value: item.ID

}

})

);

//response ending tag

}

//success ending tag

//,

//error: function(msg) {

//alert(msg);

// }

});

//ajax ending tag

search:

function() {

// custom minLength

var term = extractLast(this.value);

if (term.length < 2) {

return false;

}

focus:

function() {

// prevent value inserted on focus

return false;

select:

function(event, ui) {

var terms = split( this.value );

// remove the current input

terms.pop();

// add the selected item

terms.push( ui.item.value );

// add placeholder to get the comma-and-space at the end

terms.push(

"");

this.value = terms.join(", ");

return false;

}

});

Top Reply

Response title

Attachments

jQuery Forum

autocomplete-remote multiple returns undefined error on json data returned from asp.net 2.0 webservice

Replies(1)

Re: autocomplete-remote multiple returns undefined error on json data returned from asp.net 2.0 webservice

Statistics

Tags

Actions

Related Posts