自动填充文本框不会在单击文本框内显示结果

Question

I have a autocomplete textbox which filters exactly what I want to search for. But now what I want is,

If user doesn't types anything into the textbox and just clicks the textbox . It should show all the result. Is this possbile ?

Below is my code.

$(document).ready(function () {
        SearchText();
    });
    function SearchText() {
        $("#txt712").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Frm_Agreement_Master.aspx/GetAutoCompleteData",
                    data: "{'username':'" + extractLast(request.term) + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            focus: function () {
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
        $("#txt712").bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }
    }

Also find the link from where I got the reference.

Reference link

UPDATE

Server side code

[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
    List<string> result = new List<string>();
    using (OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString()))
    {
        using (OracleCommand cmd = new OracleCommand("select distinct survey_area_7_12 FROM xxcus.xxacl_pn_farming_mst WHERE survey_area_7_12 LIKE '%' || :searchtext || '%'", ObjPriCon))
        {
            ObjPriCon.Open();
            cmd.Parameters.AddWithValue(":searchtext", username.ToLower());
            OracleDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    result.Add(dr["survey_area_7_12"].ToString());
                }
            }
            return result;
        }
    }
}

Answer 1

In Server code check if the search string is null or not and trigger the query accorduingly

    public static List<string> GetAutoCompleteData(string username)
    {
    List<string> result = new List<string>();
    using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
    {

     **//check if user name is not null**
    if(null != username){
    using (SqlCommand cmd = new SqlCommand("select DISTINCT UserName from UserInformation where UserName LIKE '%'+@SearchText+'%'", con))}
    else{
      using (SqlCommand cmd = new SqlCommand("select UserName from UserInformation, con))}
}
    {
    con.Open();
    cmd.Parameters.AddWithValue("@SearchText", username);
    SqlDataReader dr = cmd.ExecuteReader();
    while (dr.Read())
    {
    result.Add(dr["UserName"].ToString());
    }

Answer 2

You can use "Focus" event to do this.

.focus(function () {
    $(this).autocomplete("search");
});

Full code as below.

    $("#txt712").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Frm_Agreement_Master.aspx/GetAutoCompleteData",
                data: "{'username':'" + extractLast(request.term) + "'}",
                dataType: "json",
                success: function (data) {
                    response(data.d);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        },
        focus: function () {
            $(this).autocomplete("search"); //New Code
        },
        select: function (event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });