jQuery Autocomplete not persisting values during ASP.NET postback

Question

I have a really simple problem that I am struggling to find a solution for.

Basically I have an ASP.NET textbox declared as such.

<asp:TextBox runat="server" ID="txtCourse" CssClass="input-xlarge HighlightibleField" placeholder=""></asp:TextBox>

Onto this textbox I have bound a the jQuery UI autocomplete widget like this.

$("#<% =txtCourse.ClientID %>").autocomplete({
    source: ["Course1", "Course2", "Course3"],
    select: function (event, ui) {
        __doPostBack("<% =btnPostBacker.UniqueID %>", "");
    }
});

The postback occurs as expected however the txtCourse.Text will not persist (or postback) the value that it was populated with.

So for example, I go ahead and select "Course1", the value is populated into the txtCourse textbox, the postback occurs and I view the value of txtCourse.Text and it will still be only the text that I have inputted using the keyboard (eg: "c").

I have tried setting a timer to delay the execution of the postback ever so slightly as such:

setTimeout(function () {
    __doPostBack("<% =btnPostBacker.UniqueID %>", "");
}, 500);

And while this seems to work, I feel it shouldn't be necessary and have no idea why it is required.

What am I doing wrong? Any help would be sincerely appreciated.

Answer 1

Do you need to post the item selected?

select: function( event, ui ) {
    __doPostBack("<% =btnPostBacker.UniqueID %>", ui.item);
}

EDIT: or perhaps:

  select: function( event, ui ) {
        $(this).val(ui.item);
        __doPostBack("<% =btnPostBacker.UniqueID %>", "");
    }