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.

If you're specifying dataType: 'json' in your jQuery, you probably shouldn't need to call jQuery.parseJSON() because your success callback function should only ever be passed an object, not a string. If the response isn't valid JSON, the success callback won't be executed. Can you post the response from the AJAX call? — Anthony Grist
– Anthony Grist, Commented Aug 7, 2012 at 12:13
Apparently there is no answer. I put some break points in my script(and I am using IE, cause I know I cannot debug in other browsers), but it doesn't go there. Sorry you guys, I assume you hear a lot of silly/obvious questions, but I would't post it if I haven't tried to do my part of research for over a week now :) — SunnyDay
– SunnyDay, Commented Aug 7, 2012 at 12:18
The ajax call it's not returning anything.. in fact, it doesn't enter in ConstructSuggestionArray() and I cannot figure out why.. — SunnyDay
– SunnyDay, Commented Aug 7, 2012 at 12:51

rahul · Accepted Answer · 2012-08-07 12:05:31Z

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/

answered Aug 7, 2012 at 12:05

rahul

7,6738 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SunnyDay Over a year ago

That was one of the very first piece of documentation I have read, but I still cannot understand what I am doing wrong here in my code. Thanks for your answer.

Chao · Accepted Answer · 2012-08-07 13:47:21Z

0

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

answered Aug 7, 2012 at 13:47

Chao

3,0433 gold badges33 silver badges36 bronze badges

Collectives™ on Stack Overflow

How can I implement Javascript autocomplete functionality?

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