AjaxControlToolkit AutoCompleteExtender is not displaying suggestions - asp.net

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;
}

Answer 1

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.

Answer 2

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;
}