jQuery UI AutoComplete Using an ASP.Net PageMethod Data Source

    $(document).ready(
    function () {
        var searchTextFieldName = "#" + $("#header_searchTextFieldName").val();
        var searchButtonName = "#" + $("#header_searchButtonName").val();

        //configure the autocomplete dropdown on the search textbox
        $(searchTextFieldName).autocomplete({
            source: myHistorySourceFunction,
            minLength: 0,
            select: myHistorySelectFunction
        });

        //call the server for the result set
        function myHistorySourceFunction(request, response) {
            $.ajax({
                type: "POST",
                url: "../default.aspx/myHistory",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    //filter the result set based on what the user has typed in the search textbox
                    data.d = $.grep(data.d, function (item) {
                        return (item.toLowerCase().indexOf(request.term.toLowerCase()) != -1)
                    });
                    //map the formatted, filtered result set for use by the autocomplete behavior
                    response($.map(data.d, myHistoryDataFormatFunction));
                }
            });
        };

        //format the result items
        function myHistoryDataFormatFunction(item) {
            return { label: item, value: item };
        };

        //trigger the search button click event
        function myHistorySelectFunction(event, ui) {
            window.setTimeout("$('" + searchButtonName + "').click()", 100);
        };

        //display the autocomplete dropdown when the user clicks in the textbox
        $(searchTextFieldName).click(function () {
            if ($(searchTextFieldName).autocomplete("widget").is(":visible")) {
                return;
            }
            $(searchTextFieldName).autocomplete("search", "");
        });
    });