I have a asp:Textbox with autocomplete, the data comes from a webservice and returns Json data. When a item is selected it puts a value (the id) into a 'hidden' field and the price into another textbox . This all works fine. But when I put more or less the same code into a asp:repeater it doesn't do the autocomplete.
This is a graps from my asp code:
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<asp:TextBox runat="server" id="txtItem2" style="width:500px"/><br />
<asp:TextBox runat="server" ID="txtHiddenItemID2" /> <br />
<asp:TextBox runat="server" ID="txtPrice2" />
<asp:Repeater ID="rptArtLijnen" runat="server"
onitemcommand="rptArtLijnen_ItemCommand">
<HeaderTemplate>
<table border="Solid">
<tr>....
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<div class="ItemAutoComplete" id="ItemAutoCompleteDiv">
<td>
<asp:TextBox runat="server" ID="txtItem" Text='<%#Eval("Item") %>' class="txtItemclass" />
<asp:TextBox ID="txtHiddenItemID" runat="server" class="txtHiddenItemclass"/>
</td>
<td><asp:TextBox runat="server" ID="txtPrice" value='<%#Eval("Price") %>'/></td>
</div>
</tr>
</ItemTemplate>
<FooterTemplate>
</Table>
</FooterTemplate>
</asp:Repeater>
This is my jQuery code:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "AutoCompleteItems.asmx/GetItemJ",
dataType: "json",
data: "{ 'data': '" + document.getElementById("txtItem2").value + "' }",
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#txtItem2').autocomplete({
minLength: 0,
source: data.d,
focus: function (event, ui) {
$('#txtItem2').val(ui.item.value);
return false;
},
select: function (event, ui) {
$('#txtItem2').val(ui.item.ItemCode + " " + ui.item.Description);
$('#txtHiddenItemID2').val(ui.item.ID);
$('#txtPrice2').val(ui.item.Price);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + errorThrown);
}
});
$(".ItemAutoComplete").each(function (i, element) {
var txtItem = $(this).find('input[id*=txtItem]:first')
var txtHiddenItemID = $(this).find('input[id*=txtHiddenItemID]:first')
var txtPrice = $(this).find('input[id*=txtPrice]:first')
$.ajax({
type: "POST",
url: "AutoCompleteItems.asmx/GetItemJ",
dataType: "json",
data: "{ 'data': '" + txtItem.val() + "' }",
contentType: "application/json; charset=utf-8",
success: function (data) {
txtItem.autocomplete({
minLength: 0,
source: data.d,
focus: function (event, ui) {
txtItem.val(ui.item.value);
return false;
},
select: function (event, ui) {
txtItem.val(ui.item.ItemCode + " " + ui.item.Description);
txtHiddenItemID.val(ui.item.ID);
txtPrice.val(ui.item.Price);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + errorThrown);
}
});
});
});
This is my webmethod (which works with the textbox) with the class:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<ItemJ> GetItemJ(string data) {
List<ItemJ> ItemJs = new List<ItemJ>();
try
{
DataContext d = new DataContext();
List<string> typeList = "P R".Split(" ".ToCharArray()).ToList();
ItemJs = (from i in d.Items
join a in d.ItemAssortments on i.Assortment equals a.Assortment
where a.SecurityLevel <= 999
where i.SecurityLevel <= 999
&& a.SecurityLevel <= 999
&& i.IsSalesItem == true
&& !typeList.Contains(i.Type.ToString())
&& (new string[] { "A", "D", "F" }).Contains(i.Condition.ToString())
&& (SqlMethods.Like(i.Description, "%" + data + "%") || SqlMethods.Like(i.ItemCode, data + "%"))
orderby i.ItemCode
select new ItemJ
{
ItemCode = i.ItemCode,
Description = i.Description,
ID = i.ID.ToString(),
Price = i.PurchasePrice.ToString()
}).Take(10).ToList();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
return ItemJs;
}
public class ItemJ
{
string _value;
public string value
{
get { return _Description + " (" + _ItemCode + ")"; }
}
string _Description;
public string Description
{
get { return _Description; }
set { _Description = value; }
}
string _ID;
public string ID
{
get { return _ID; }
set { _ID = value; }
}
string _ItemCode;
public string ItemCode
{
get { return _ItemCode; }
set { _ItemCode = value; }
}
string _Price;
public string Price
{
get { return _Price; }
set { _Price = value; }
}
}
I've spent hours on this, can somebody give me a clue?