Hi,
I am using j-query auto complete plugin in textbox that is inside gridview. The autocomplete only works when my gridview has more than 1 row, if my gridview has only one row then the autocomplete will not work. I have spent days and days for this, so please please help. I am using the same code i downloaed from this website. Here is my code for the gridview:
<asp:GridView ID="GV_Test" runat="server" Width="870px"
AutoGenerateColumns="False" Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
HeaderStyle-BackColor="green" ShowFooter="True"
CellPadding="4" BackColor="White" BorderColor="#336666"
BorderStyle="Double" BorderWidth="3px"
DataKeyNames="ID">
<AlternatingRowStyle BackColor="#C2D69B" />
<Columns>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="ID" Visible = "True">
<ItemTemplate>
<asp:Label ID="lblTSK_ID" runat="server" Text='<%# Eval("ID")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
<ItemTemplate>
<asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
Width="230px" BackColor="LightGoldenrodYellow"></asp:TextBox>
<asp:HiddenField ID="hfUserId" runat="server" />
</ItemTemplate>
<ItemStyle Width="150px" />
</asp:TemplateField>
<asp:CommandField ShowEditButton="false" >
<ItemStyle Font-Size="Smaller" ForeColor="#FF3300" />
</asp:CommandField>
</Columns>
</asp:GridView>
and here is my code for the javascript:
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
function EndRequestHandler(sender, args) {
$("[id*=txt_UID]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("[id*=hfUserId]", $(e.target).closest("td")).val(i.item.val);
},
minLength: 1
});
}
});
</script>