Click here to Skip to main content
15,886,199 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a textbox with autocomplete feature. And a button which populates autocomplete on button click. but I am uable to select any value from autocomplete.

Here is my code for autocomplete function.
HTML
  <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);

     };
 });

Button click event:
JavaScript
    $(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();
       }
     );
});

$(document).on('click', function(e){ 
    var target = $(e.target);
    if(target.attr("id") != "txtCu" && target.attr("class") != "btn")
    {
       $('.ui-autocomplete').hide();

    }
});
Posted
v2
Comments
$("#<%=hdnCr.ClientID %>").val(i.item.val);

What is the value of i.item.val here while debugging?
sona..V 16-Jun-14 1:09am    
it is not at all going into the select event.@Tadit Dash
It will go inside that event only when you select the Text.
sona..V 16-Jun-14 1:50am    
it is showing [objcet object] when giving alert
Okay. That means you need to find the value from the object. i.item.val is actually a object. Just put the debugger and find out on which property it shows the value in Developer Tool.

Dear Sona..V,


As I understand your problem

Herewith I am submitting solution link.

Try this . .

http://stackoverflow.com/questions/24154066/how-to-populate-data-in-autocomplete-textbox-when-a-button-is-clicked[^]


Let me know if you have any further query.

Please, go through above link.

If its your answer, please mark as solution.

Best of luck for hunting solutions.

Thank you.

Regards,

Manoj Kalla
 
Share this answer
 
Comments
sona..V 16-Jun-14 2:15am    
The above link you gave,I have already tried which is not working,the only problem is I can not select any value from the autocomplete list when it is being populated on button click.@Manoj B.kalla
 
Share this answer
 
v2
Comments
sona..V 17-Jun-14 22:19pm    
I am getting error "Microsoft JScript runtime error: no such method 'select' for autocomplete widget instance" @PRAKASH9

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900