[Solved] Searchable TextBox not working inside ASP.Net AJAX UpdatePanel Partial PostBack

I am trying to implement searchable TextBox inside updatepanel but facing problem.

It’s working totally fine without update panel.

[WebMethod]
public static List<string> PerformSearch(string searchText)
{
    List<string> results = new List<string>();
 
    try
    {
        // Establish a database connection
        string connectionString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
        using (OracleConnection connection = new OracleConnection(connectionString))
        {
            // Open the database connection
            connection.Open();
 
            // Execute a SQL query to fetch the search results from the database
            string query = "SELECT EMPLOYEE_ID, ACCOUNT_NAME FROM REPORTALUSER WHERE EMPLOYEE_ID LIKE :SearchText";
            using (OracleCommand command = new OracleCommand(query, connection))
            {
                // Set the search parameter value
                command.Parameters.AddWithValue("SearchText", "%" + searchText + "%");
 
                // Execute the SQL query and read the results
                using (OracleDataReader reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        string result = reader.GetString(0);
                        results.Add(result);
                    }
                }
            }
 
            // Close the database connection
            connection.Close();
        }
    }
    catch (Exception ex)
    {
        // Handle any exceptions that occur during the search
        Console.WriteLine("Error: " + ex.Message);
    }
 
    return results;
}

<form id="form1" runat="server">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
    <asp:ScriptManager runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" />
            <ul id="searchResults"></ul>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TextBox1" EventName="TextChanged" />
        </Triggers>
    </asp:UpdatePanel>
 
    <script>
        $(document).ready(function () {
            // Handler for search textbox keyup event
            $('#txtUsername').keyup(function () {
                var searchText = $(this).val();
 
                // Call the server-side method to perform the search
                $.ajax({
                    type: 'POST',
                    url: 'WebForm1.aspx/PerformSearch',
                    data: JSON.stringify({ searchText: searchText }),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (response) {
                        // Display the search results
                        var results = response.d;
                        var listItems = '';
 
                        for (var i = 0; i < results.length; i++) {
                            listItems += '<li>' + results[i] + '</li>';
                        }
 
                        $('#searchResults').html(listItems);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log('Error: ' + errorThrown);
                    }
                });
            });
        });
    </script>
</form>