【发布时间】：2011-07-21 10:27:00
【问题描述】：
我有一个带有自动完成功能的 asp:Textbox，数据来自 web 服务并返回 Json 数据。当一个项目被选中时，它会将一个值（id）放入一个“隐藏”字段，并将价格放入另一个文本框。这一切都很好。但是当我将或多或少相同的代码放入 asp:repeater 时，它不会自动完成。
这是我的 asp 代码中的一个要点：
<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>
这是我的 jQuery 代码：
$(document).ready(function () {
//this handles the textbox out of the repeater
$.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);
}
});
//this handles the textbox in the repeater
$(".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",
//async: false,
//cache: false,
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);
}
});
});
});
这是我的网络方法（适用于文本框）和类：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<ItemJ> GetItemJ(string data) {
List<ItemJ> ItemJs = new List<ItemJ>();
//if (Request.QueryString["q"] != null)
//{
try
{
DataContext d = new DataContext();
List<string> typeList = "P R".Split(" ".ToCharArray()).ToList();
//List<string> conditionList = "A D F".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
{
//value = i.ItemCode,// + " " + i.ItemCode + " ",
ItemCode = i.ItemCode,
Description = i.Description, //+ " " + i.ItemCode + " ",
ID = i.ID.ToString(),
Price = i.PurchasePrice.ToString()
}).Take(10).ToList();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
//return null;
}
//}
return ItemJs;
}
public class ItemJ //: Item
{
//string _name;
string _value;
public string value
{
get { return _Description + " (" + _ItemCode + ")"; }
//set { _value = value; }
}
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; }
}
}
我已经花了几个小时，有人可以给我一个线索吗？
【问题讨论】：
-
选择器
input[id*=txtItem]:first在中继器外选择文本框。 （因为它是第一个txtItem。 -
顺便说一句，不要使用“catch (Exception ex){throw new Exception(ex.Message);}”。只需完全删除 try/catch 块。
标签： jquery asp.net ajax json asmx