Ajax Auto complete is not able to set TextBox Value

Question

I am having a Textbox for which i am using Ajax Autocomplete function.

The function is working correctly and is fetching the value from Database and also populating the value in TextBox.

But i am having a button which fires a query and fetches some value in a Label. This query fetches value using the selected auto complete value.

When i tried to debug i found that the textbox value used was null which is causing issues. So i is possible that though the value of Textbox is populated but is not getting set.

Here is my code for AJAX.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
    });
    //data: "{'tagName':'" + document.getElementById('txtSearchDir').value + "'}",  here tagName should be same to the variable name in fn
    function SearchText() {
        $("#txtSearchDir").autocomplete({
            source: function (request, response) {
                //alert('inside');
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "SearchPage.aspx/autoTagSearch",
                    data: "{'tagName':'" + document.getElementById('txtSearchDir').value + "'}",
                    dataType: "json",
                    success: function (data) {
                    response(data.d);
                    autoFocus: true
                    },
                    error: function (result) {
                    document.getElementById('txtSearchDir').value = "";
                       // alert(url);
                    },
                });
            }
        });
    }

Answer 1

one approach is to save the selected value into a hidden textbox on the page so it is available even after other events fire.

you do it with function autoCompleteItemSelected(source, eventArgs) event.

(there's an old post on the web somewhere that i used for this that works well but i can't find it now.)

you can get the selected value with eventArgs.get_value(); then set your hidden textbox.