Display AutoComplete result on TextBox focus in ASP.Net

Hi chetan,

Please refer below sample.

You need to set the minLength property of the jQuery AutoComplete plugin to 0 which is forcing the jQuery AutoComplete plugin to perform a Search when the TextBox is focused.

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
    rel="Stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("[id*=txtSearch]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'Default.aspx/GetFruits',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.d.length > 0) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                };
                            }))
                        } else {
                            response([{ label: 'No results found.', val: -1}]);
                        }
                    }
                });
            },
            select: function (e, u) {
                if (u.item.val == -1) {
                    return false;
                }
            },
            minLength: 0
        }).focus(function () {
            $(this).autocomplete("search");
        });
    });
</script>
<div class="searcharea col-sm-12">
    <div class="col-sm-12 col-xs-12">
        <div class="input-group custom-search-input" style="padding-top: 290px;">
            <input id="txtSearch" runat="server" type="text" class="form-control" placeholder="Search By Keyword" />
            <span class="input-group-btn">
                <button id="btnsearch" runat="server" type="submit" class="btn btn-warning">
                    <span class="glyphicon glyphicon-search"></span>SEARCH
                </button>
            </span>
        </div>
        <!-- /input-group -->
    </div>
</div>

C#

[System.Web.Services.WebMethod]
public static string[] GetFruits(string prefix)
{
    List<string> fruits = new List<string>();
    fruits.Add("Mango");
    fruits.Add("Apple");
    fruits.Add("Banana");
    fruits.Add("Orange");
    fruits.Add("Pineapple");
    fruits.Add("Guava");
    fruits.Add("Grapes");
    fruits.Add("Papaya");
    return fruits.Where(f => f.ToLower().IndexOf(prefix.ToLower()) != -1).ToArray();
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function GetFruits(ByVal prefix As String) As String()
    Dim fruits As List(Of String) = New List(Of String)()
    fruits.Add("Mango")
    fruits.Add("Apple")
    fruits.Add("Banana")
    fruits.Add("Orange")
    fruits.Add("Pineapple")
    fruits.Add("Guava")
    fruits.Add("Grapes")
    fruits.Add("Papaya")
    Return fruits.Where(Function(f) f.ToLower().IndexOf(prefix.ToLower()) <> -1).ToArray()
End Function

Screenshot