asp.net - ボタンをクリックするとテキストボックス内の Ajax 値が消える

Question

ajaxとwebmethodを使用してデータベースから値を取得するjqueryがあり、次のようになります

$(document).ready(function() {
        SearchText();
    });
function SearchText() {
   $(".autosuggest").autocomplete({
            source: function(request, response) {
            $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "InsertPage.aspx/GetAutoCompleteData",
                    data: "{'username':'" + document.getElementById('name').value + 
                        "'}",
                    dataType: "json",
                    success: function(data) {
                        response(data.d);
                    },
                    error: function(result) {
                        alert("Error");
                    }
                });
            }
        });
    }
</script>

そしてウェブメソッドは

[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
    List<string> result = new List<string>();
    using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from student_details 
           where UserName LIKE '%'+@SearchText+'%'", con))

    {
        con.Open();
        cmd.Parameters.AddWithValue("@SearchText", username);
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            result.Add(dr["UserName"].ToString());
        }

ajaxが使用されているテキストボックスは

<asp:TemplateField HeaderText="Student Name">
     <ItemTemplate>                    
        <input type="text" id="name" class = "autosuggest" />
   </ItemTemplate>
</asp:TemplateField>

プログラムをデバッグすると、この ajax テキスト ボックスの値が null になり、テキスト ボックスの出力が空になるため、さらに先に進んでデータベースに値を保存できません。