AjaxControlToolkit AutoCompleteExtender is not displaying suggestions

Question

I am using AutoCompleteExtender in asp.net to fetch name and designation based on token(empno). The is pulled from database and I could see it in the network tab of Chrome Dev-tools. But it is not rendered as suggestion list.

My attempt for the code:

<div class="modal-body">                        
                     <div class="form-group">
                        <label for="pToken">Token</label>
                         <asp:TextBox ID="pToken" runat="server" CssClass="form-control" placeholder="Enter Token No" />                           
                         <ajaxcontrol:AutoCompleteExtender runat="server" 
                                    ID="acToken" TargetControlID="pToken" MinimumPrefixLength="3"
                                    EnableCaching="true" FirstRowSelected="false" 
                                    ServiceMethod="getPatients" ServicePath="CheckPatientDetails.aspx"
                                    CompletionSetCount="6" DelimiterCharacters="|"
                                    CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"
                                    CompletionListHighlightedItemCssClass="AutoCompleteExtender_HighlightedItem"
                                    CompletionListCssClass="AutoCompleteExtender_CompletionList">
                          </ajaxcontrol:AutoCompleteExtender>
                     </div>
                    <div class="form-group">
                        <label for="pName">Name</label>                            
                        <asp:TextBox ID="pName" runat="server" CssClass="form-control" placeholder="Enter patient name" required />
                    </div>
                    <div class="form-group">
                        <label for="pDesig">Designation</label>                            
                        <asp:TextBox ID="pDesig"  runat="server" CssClass="form-control" placeholder="Enter designation" />
                    </div>
                    <div class="form-group">
                        <label for="pType">Type</label>                            
                        <asp:DropDownList ID="pType" runat="server" CssClass="form-control" required>
                            <asp:ListItem Value="E" Selected="True">Employee</asp:ListItem>
                            <asp:ListItem Value="I">In Patient</asp:ListItem>
                            <asp:ListItem Value="O">Out Patient</asp:ListItem>                        
                            <asp:ListItem Value="X">Others</asp:ListItem>                                
                        </asp:DropDownList>                            
                    </div>

The backend code for the same is below :

[WebMethod]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<Patient> getPatients(string prefixText, int count)
    {
        List<Patient> patientList = new List<Patient>();
        OracleConnection con = null;
        OracleDataReader odr = null;

        string query = "select nvl(emp.empid,'') token,DECODE(SHORTNAME,NULL,FIRSTNAME,SHORTNAME)  name,DESIGSHORT desigdesc" +
                        " from employee emp join designation desig  on (emp.desigcode = desig.desigcode and desig.isactive = 'Y') " +
                        " where empid like '%" + prefixText + "%' and emp.EMPSTATUS = 'A' order by empid";
        try
        {
            con = getHRMSConnection();
            con.Open();
            using (con)
            {
                using (OracleCommand cmd = new OracleCommand(query, con))
                {
                    odr = cmd.ExecuteReader();
                    Patient patient = null;
                    while (odr.Read())
                    {
                        patient = new Patient();
                        patient.setToken(Convert.ToString(odr["token"]));
                        patient.setName(Convert.ToString(odr["name"]));
                        patient.setDesignation(Convert.ToString(odr["desigdesc"]));
                        patientList.Add(patient);
                    }

                }
            }
        }
        catch (Exception ex)
        {

        }
        return patientList;
    }

take a new page, and try sample auto extender first for more knowledge. This will give you an idea of what is going wrong. I suggest you use this link for implementing https://www.c-sharpcorner.com/UploadFile/57a357/autocomplete-extender-in-Asp-Net/. As it is hard to tell what is wrong with your code. Hope this helps you — Nad, Sep 17 '18 at 06:43
I have tried as said.. and it's fetching data now. May b the concept of datatable is working fine here. But still not convinced. — Devendra Singh, Sep 19 '18 at 13:29

score 0 · Answer 1 · answered Sep 16 '18 at 07:50

0

There are many reasons for the issue you are facing. Starting with basic check if service path is correct or not.

Secondly, have you declared with [webmethod] above your function fetching data.

answered Sep 16 '18 at 07:50

MaxST

61
1
8

I have updated the question with the backend method that is being called. On putting breakpoint the function is being executed. Also have put the response from the server in the snapshot. So data is being fetched but not displayed. – Devendra Singh Sep 16 '18 at 09:40

score 0 · Accepted Answer · answered Sep 23 '18 at 07:23

The task is done now, I am getting the autocomplete rendered properly. Posting for those who may refer to this later on.

I used this link to get the autocomplete rendered on modal. Autocomplete extender not working inside modal popup extender

Now my modal body is

 <div class="modal-body">             
                     <div class="form-group">             

                    <asp:AutoCompleteExtender ServiceMethod="GetSearch" MinimumPrefixLength="2" CompletionInterval="10"  
                        EnableCaching="false" CompletionSetCount="10" TargetControlID="pToken" ID="AutoCompleteExtender2"  
                        runat="server" FirstRowSelected="false" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" 
                        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">  
                    </asp:AutoCompleteExtender>  
                    <label for="pToken">Token</label>                        
                    <asp:TextBox ID="pToken" runat="server"  CssClass="form-control" placeholder="Enter Token No"/>                

                     </div>
                    <div class="form-group">
                        <label for="pName">Name</label>                            
                        <asp:TextBox ID="pName" runat="server" CssClass="form-control" placeholder="Enter patient name" required />
                    </div>
                    <div class="form-group">
                        <label for="pDesig">Designation</label>                            
                        <asp:TextBox ID="pDesig"  runat="server" CssClass="form-control" placeholder="Enter designation" />
                    </div>
                    <div class="form-group">
                        <label for="pType">Type</label>                            
                        <asp:DropDownList ID="pType" runat="server" CssClass="form-control" required>
                            <asp:ListItem Value="E" Selected="True">Employee</asp:ListItem>
                            <asp:ListItem Value="I">In Patient</asp:ListItem>
                            <asp:ListItem Value="O">Out Patient</asp:ListItem>                        
                            <asp:ListItem Value="X">Others</asp:ListItem>                                
                        </asp:DropDownList>                            
                    </div>
                </div>

And server side code is :

[WebMethod]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> GetSearch(string prefixText, int count)
    {

            OracleConnection con = null;
            OracleDataAdapter oda = null;
            DataTable dt;
            prefixText = prefixText.ToLower();
            DataTable Result = new DataTable();
            List<string> Output = new List<string>();

            string str = "select nvl(emp.empid,'') ||'('||DECODE(SHORTNAME,NULL,FIRSTNAME,SHORTNAME)||','|| DESIGSHORT ||')' employee" +
                           " from employee emp join designation desig  on (emp.desigcode = desig.desigcode and desig.isactive = 'Y') " +
                           " where lower(empid) like '%" + prefixText + "%' and emp.EMPSTATUS = 'A' order by empid";
            con = getHRMSConnection();
            using (con)
            {
            try
            {
                con.Open();
                oda = new OracleDataAdapter(str, con);

                dt = new DataTable();
                oda.Fill(dt);

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    Output.Add(dt.Rows[i][0].ToString());
                }

            }
            catch (Exception ex)
            {

            }
        }

        return Output;
    }

AjaxControlToolkit AutoCompleteExtender is not displaying suggestions

2 Answers2