How To Populate Data In Autocomplete Textbox When A Button Is Clicked?

I have a textbox with jquery autocomplete feature.It populates data based on a condition if '/' is entered and then a character.But i want to populate all the data in the autocompl

Solution 1:

Do this to get the expected result

ASP Button, add class property CssClass

<asp:Button ID="Button2" runat="server" Text="Button" CssClass="btn"/>

and jQuery Part

$(document).on("click","btn",function(e){
     e.preventDefault();
     $("#<%=txtCu.ClientID %>").autocomplete("search", "");
     $("#<%=txtCu.ClientID %>").autocomplete("select",function (e, i) {
        $("#<%=hdnCr.ClientID %>").val(i.item.val);
        if (i.item.val == "No Records Found") {
            $("#<%=hdnCr.ClientID %>").val(-1);
            document.getElementById('<%=txtCu.ClientID%>').value = "";
            return false;
        }
        checkddlcustomerinfo();
       }
     );
});

to close autocomplete on outside click

$(document).on('click', function(e){ 
    var target = $(e.target);
    if(target.attr("id") != "txtCu" && target.attr("class") != "btn")
    {
        $("#<%=txtCu.ClientID %>").autocomplete('close');

    }
});

Note: You must set minLength: 0 in your autocomplete

Working DEMO

Solution 2:

see this edit to your autocomplete code:

$.ajax({
      url: '<%=ResolveUrl("~/Webservice.asmx/GetCus") %>',
      data: "{ 'prefix': '" + term + "'}",
      dataType: "json",
      type: "POST",
      async: false,
      mustMatch: true,
      contentType: "application/json; charset=utf-8",
      success: function (data) {
           response($.map(data.d, function (item) {
                return {
                     label: item.split('^')[0],
                     val: item.split('^')[1]
                }
           }))
           $('.ui-autocomplete').hide();   // <-- this line
      },

edit XHTML :

<asp:Button ID="Button2" runat="server" Text="Button" Class="myBtn"/>

ps. it might be CssClass="myBtn" haven't used web forms in a bit

then jQuery:

$(function(){
  $(document).on('click', '.myBtn', function(e){
    e.preventDefault();
    //maybe a prevent propigation line too just for other browsers like IE
    $('.ui-autocomplete').show();
  });
});

});