jquery autoComplete with List<string> as Source

Question

i have text box name txtEmailList, i provided autocomplete list for it,

 <asp:TextBox runat="server" ID="txtEmailList" CssClass="txtAutoComplete">

script for autocomplete

$('#txtEmailList').autocomplete({
                source: function(request, response) {
// this is the ajax call, which is running successfully
                    var msg = 
Assessments_JqueryAutoComplete.AutoComplete(request.term).value; //(ajaxpro functions)
                    response(msg.d); 
                }

            });

output will come as like this (in firebug it shows as plain/text), how can i attach this array to source property. ( i cant use $.ajax method, as i need to use ajaxpro as office rules), so i get the list of array back from ajax call, how do i bind the autocomplete.

["List 1","List 2","List 3","List 4"];/* // this is the output response from jquery( from firebug)

[AjaxPro.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public List<string> AutoComplete(string query)
{
List<string> objLisItmes = new List<string>();
objLisItmes.Add("List 1");
objLisItmes.Add("List 2");
objLisItmes.Add("List 3");
objLisItmes.Add("List 4");
return  objLisItmes;
}

this is the firebug output in for Response headers

Cache-Controlno-cache Content-Length40 Content-Typetext/plain; charset=utf-8 DateWed, 07 Mar 2012 10:45:37 GMT Expires-1Pragmano-cache

Answer 1

Instead of returning a List. I would return a string Array as:

[AjaxPro.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public string[] AutoComplete(string query)
{
   List<string> objLisItmes = new List<string>();
   objLisItmes.Add("List 1");
   objLisItmes.Add("List 2");
   objLisItmes.Add("List 3");
   objLisItmes.Add("List 4");
   return  objLisItmes.ToArray();
}

Answer 2

Instead of using

$('#txtEmailList')

try using

$('input[id$="txtEmailList"]')

Since you are using a server control TextBox your ID for it is most likely ending up as something like "parentID1_parentID2_txtEmailList". The above code will grab the input that has an ID that ends with "txtEmailList".

Here's how I am doing it in my test project and it is working. Of course I'm not using AjaxPro, so I am not sure exactly how you would do it with that instead, but maybe it will give you some ideas.

<script type="text/javascript">
        $(function () {
            var element = $('input[id$="TextBox1"]');

            element.autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Default.aspx/GetList",
                        data: "{ 'term': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item
                                }
                            }))
                        }
                    })
                }
            });
        });
    </script>

Answer 3

Shouldn't it be:

$('#txtEmailList').autocomplete({source: function(request, response) {
    // this is the ajax call, which is running successfully
    var msg = Assessments_JqueryAutoComplete.AutoComplete(request.term).value; //(ajaxpro functions)
    response(msg); 
    }

});

?

If not, I would suggest you use console.log(msg) to analyse the response object if possible.

Answer 4

Just make sure your AJAX call is returning valid string format like this dummy example. Store it in a variable. Then use it to define source property like this :

var availableValues = ["List 1","List 2","List 3","List 4"];
// var msg = Assessments_JqueryAutoComplete.AutoComplete(request.term).value;
$( "#txtEmailList" ).autocomplete({
    source: availableValues
});