使用jQuery和ASP中继器自动完成填充ID [英] Autocomplete with jQuery and asp repeater fills ID
本文介绍了使用jQuery和ASP中继器自动完成填充ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有自动完成功能的asp:Textbox，数据来自Web服务并返回Json数据.当选择了项目它把一个值(ID)成"隐藏"字段和价格到另一文本框.这一切都很好.但是，当我将差不多相同的代码放入asp:repeater时，它不会自动完成.
这是我的ASP代码的精华:
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>
这是我的jQuery代码:
This is my jQuery code:
$(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);
}
});
});
});
这是我的网络方法(与文本框一起使用)，具有以下类:
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>();
//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; }
}
}
我已经花了几个小时，有人可以给我一个线索吗?
I''ve spent hours on this, can somebody give me a clue?
推荐答案
(document).ready(function(){ //这可以处理中继器中的文本框
(document).ready(function () { //this handles the textbox out of the repeater
.ajax({ 输入:"POST"， url:"AutoCompleteItems.asmx/GetItemJ"， dataType:"json"， 数据:"{"数据":" + document.getElementById("txtItem2").value +''}"， contentType:"application/json; charset = utf-8"， 成功:函数(数据){
.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， 来源:data.d， focus:function(event，ui){
(''#txtItem2'').autocomplete({ minLength: 0, source: data.d, focus: function (event, ui) {
这篇关于使用jQuery和ASP中继器自动完成填充ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
