Click here to Skip to main content
14,971,215 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Autocomplete is working but alert is not called in select event.

What I have tried:

<pre lang="Javascript">
function SearchText() {

            $('#<%=txtPinCode2.ClientID%>').autocomplete({
                minChars: 1,
                width: 6,                
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "scm/BranchSearch.ashx?act=bnkb&BankCode=" + $('#<%=ddlBank.ClientID %> :selected').val() + "&PinCode=" + $('#<%=txtPinCode2.ClientID%>').val(),
                        data: "{}",
                        dataType: "json",
                        success: function (data) {
                            mydata = new Array();
                            for (var i = 0; i < data.length; i++) {
                                mydata.push({
                                    label: data[i].BankBranchName,
                                    value: data[i].BanckBranchCode
                                });

                            }  //end of for loop

                            //setup the search to search the label and the description
                            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                            response($.grep(mydata, function (arrItem) {                               
                                return matcher.test(arrItem.label);
                            }));

                        },
                        select: function (e,ui) {
                            alert(ui.item.label)
                                                   
                        },                        
                        error: function (result) {
                            alert("No Match");
                        }
                    });
                }

            });
        }
Posted
Updated 13-Feb-17 19:37pm
v2
Comments
Karthik_Mahalingam 14-Feb-17 1:12am
   
is the autocomplete working?
Member 7909353 14-Feb-17 1:27am
   
yes
Karthik_Mahalingam 14-Feb-17 1:27am
   
check if there is any error in console window

move the select event outside the ajax function call
JavaScript
$('#<%=txtPinCode2.ClientID%>').autocomplete({
           minChars: 1,
           width: 6,
           source: function (request, response) {
               $.ajax({
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   url: "scm/BranchSearch.ashx?act=bnkb&BankCode=" + $('#<%=ddlBank.ClientID %> :selected').val() + "&PinCode=" + $('#<%=txtPinCode2.ClientID%>').val(),
                   data: "{}",
                   dataType: "json",
                   success: function (data) {
                       mydata = new Array();
                       for (var i = 0; i < data.length; i++) {
                           mydata.push({
                               label: data[i].BankBranchName,
                               value: data[i].BanckBranchCode
                           });

                       }  //end of for loop

                       //setup the search to search the label and the description
                       var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                       response($.grep(mydata, function (arrItem) {
                           return matcher.test(arrItem.label);
                       }));

                   }
               });
           }
           ,
           select: function (e, ui) {
               alert(ui.item.label)

           },
           error: function (result) {
               alert("No Match");
           }

       });
   
v2
Comments
Member 7909353 14-Feb-17 1:42am
   
It is working but when I select BankBranch(means suggestion) then it shows on text box it's value not label.
Karthik_Mahalingam 14-Feb-17 2:05am
   
$.grep returns an object

try

var temp = $.grep(mydata, function (arrItem) {
return matcher.test(arrItem.label);
});
var items = [];
for (var i = 0; i < temp.length; i++) {
items.push(temp[i].label)
}
response(items);
Hi ,

the first thing is to check browser console for error , if not then have a look at version of jquery you are using is properly referenced.

just check below link for reference of Auto complete.

Auto Complete TextBox Using jQuery and ASP.NET MVC[^]
   

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

  Print Answers RSS
Top Experts
Last 24hrsThis month



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