GridView templatefield textbox and AutoCompleteExtender ASP.NET - asp.net

Question

I am having some issues using AJAX tool kit.
I am having a GridView with a template field, which has a textbox.
I have added an AutoCompleteExtender for this textbox. I have also set the ServicePath and ServiceMethod properties of the AutoCompleteExtender.
I wont get any error, but when i type text in the textbox, i wont get anything returned. I will post the code below.
Since i am a newbie to AJAX, i dont know if there is some other things which needs to be set for using AJAX in my project.
I am using ASP.NET and VB.NET for code-behind.
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Plain.Master" CodeBehind="BillPatient.aspx.vb" Inherits="Test.BillPatient" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancel" EventName="Click" />
</Triggers>
<ContentTemplate>
<center>
<br />
<h1>
<asp:Label ID="lblTitle" runat="server" Text="New OP Patient Bill" />
</h1>
<br />
<asp:Label ID="lblStatus" runat="server" ForeColor="Green" />
<table id="tblModify" class="table" frame="border" width="100%">
<tr>
<td>
<asp:Label ID="lblBillDetail" runat="server" Text="Bill Detail(s)" Visible="false"></asp:Label>
<asp:GridView ID="gvBillDetail" runat="server" AllowPaging="True" AutoGenerateColumns="False" CssClass="table" Width="100%">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID">
<HeaderStyle HorizontalAlign="Center" Width="50px" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="Particulars">
<ItemTemplate>
<asp:TextBox ID="txtBillableItem" runat="server" Columns="30" MaxLength="30"></asp:TextBox>
<asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1" ID="txtBillableItem_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="~/BillDetail.asmx" TargetControlID="txtPatientName">
</asp:AutoCompleteExtender>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Billable Amount">
<ItemTemplate>
<asp:Label ID="lblBillableAmount" runat="server"></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:ButtonField ButtonType="Button" CommandName="Modify" HeaderText="Modify" Text="Modify">
<ControlStyle CssClass="btn btn-info btn-xs" />
<HeaderStyle HorizontalAlign="Center" Width="90px" />
<ItemStyle HorizontalAlign="Center" />
</asp:ButtonField>
</Columns>
<PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
<PagerStyle HorizontalAlign="Right" />
</asp:GridView>
<asp:ValidationSummary ID="ValidationSummary2" runat="server" ForeColor="#993333" Style="text-align: center" Visible="True" ValidationGroup="AddBillDetail" />
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" Text="Save" ValidationGroup="Save" />
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" CssClass="btn" Text="Cancel" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Please forgive me for not formatting the code correctly :)
And my web service code is:-
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class BillDetail
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function HelloWorld() As String
Return "Hello World"
End Function
<System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()>
Public Shared Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer) As String()
' Create array of movies
Dim movies() As String = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"}
' Return matching movies
Return (
From m In movies
Where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)
Select m).Take(count).ToArray()
End Function
End Class
I hope the above information is sufficient. If not, please comment i will provide more info.
Thank you!

Answer 1

I got the solution for this myself.
I just stopped using WebService and put my ServiceMethod in my code-behind.
Set the property ServicePath to your own page. i.e If AutoCompleteExtender is in Test.aspx and the Service method is in Test.aspx.vb, then the properties will be:-
ServiceMethod="GetCompletionList"
and
ServicePath="~/Test.aspx.vb"
if the ServiceMethod is actually getting executed but if dropdown is not visible in U.I, then add the follwing code in head tag in html.
<style type="text/css" >
.popUpDialog
{
z-index: 99 !important;
}
.autoComplete_listMain
{
z-index: 2147483647 !important;
background: #ffffff;
border: solid 2px #808080;
color: #000000;
}
</style>
i dont know why i should add this , but it surely did work for me! :)
if anyone knows why, please be free to comment here....