How can I implement Javascript autocomplete functionality?

Question

I am quite new to programming, but most of it I am new when it comes to JavaScript/jQuery. The reason I am here is because even I have searched through the internet for a solution for my search with autocomplete / I have tryed to apply the different versions of what I found, I cannot get to a solution that actually works :)

Here is my piece of code:

var mydata
$(document).ready(function () 
{
    ConstructSuggestionArray();
    $("[id$='txtSearchProject']").keypress(function () 
    {
       $("[id$='txtSearchProject']").autocomplete
            ({
                source: mydata
            })
    })
});

function ConstructSuggestionArray()
{
    $.ajax
    ({
        url: 'ProjectManagement.aspx/ConstructSuggestionArray',
        type: "POST",
        data: {},
        async: false,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) 
        {
            if (response.d != null) 
            {
                mydata = jQuery.parseJSON(response.d);
                return true;
            }
            else 
            {
                return false; 
            }
        }
    });
}

Also, the piece of code where I construct the array:

public string ConstructSuggestionArray()
        {
            using (DataClassesDataContext context = new DataClassesDataContext())
            {
                List<Utils.ProjectsOfAUser> theProjects =  
                      ReturnProjectsAccordingToAllocation(context);
                string[] projectsNameArray = new string[theProjects.Count];
                int index = 0;

            foreach (Utils.ProjectsOfAUser oneProject in theProjects)
            {
                projectsNameArray[index] = oneProject.Name;
                index++;
            }

            string strJSON = string.Empty;
            JavaScriptSerializer objJSSerializer = new JavaScriptSerializer();
            strJSON = objJSSerializer.Serialize(projectsNameArray).ToString();

            return strJSON;
        }
    }
}

And I have also, added the script in my project and in my asp.net page.

I am very confused and I would be very thankful if you could help me figure out this.

Mention : txtSearchProject - is an asp control.

Thank you in advance.

Answer 1

have you used jquery autocomplete plugin it's very nice and easy to implement also please go through this link

http://jqueryui.com/demos/autocomplete/

Answer 2

The jQuery AJAX methods are asynchronous, the autocomplete is binding to the null variable so has no options. Then the callback runs and fills the variable, but it's too late.

You are two choices here. You could put the following in your success callback:

$("[id$='txtSearchProject']").autocomplete( "options", "source", mydata);

Which would set the source for the dropdown once it's completed (this has the benefit of updating if you need to call this again).

You can also give the url to ConstructSuggestionArray as the source, the widget will handle calling the page (see the autocomplete demo page for "remote datasource" and view the source).