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 autocomplete list when a button is clicked inspite of what ever data is there in the textbox.

My button :

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

And my autocomplete function with condition to populate data is:

<script type="text/javascript">

  function pageLoad(sender, args) {
  $(function () {
    $("#<%=txtCu.ClientID %>").autocomplete({
        source: function (request, response) {
         if(request.term.indexOf("/") == (request.term.length-1) && enterFlag)
                {
             var term = request.term.slice(0,-1)
              $.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]
                        }
                    }))
                },
                error: function (response) {

                },
                failure: function (response) {

                 }
              });
           };
         },
        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();
        },
        minLength: 0
    }).bind('focus', function () { $(this).autocomplete("search"); })
    .data("autocomplete")._renderItem = function (ul, item) {

        return $("<li></li>").data("item.autocomplete", item).append("<div><table><tr><td width='200px'>" + item.label + "</td>" + "<td width='110px'>" + item.val.split('~')[6] + "</td>" + "<td>" + item.val.split('~')[4] + "</td></tr></table></div>").appendTo(ul);

     };
});

}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

Method 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();
  });
});

});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0