Click here to Skip to main content
15,896,153 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");
           }

       });
 
Share this answer
 
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[^]
 
Share this answer
 

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