自动完成与jQuery和asp.net中继填写ID [英] Autocomplete with jQuery and asp.net repeater fills ID
本文介绍了自动完成与jQuery和asp.net中继填写ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个ASP：文本框与自动完成，数据来自一个web服务，返回JSON数据。当一个项目被选中它把一个值（ID）到一个隐藏字段和价格到另一个文本框。这一切工作正常。但是，当我把更多的差不多code到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.
这是从我的ASP code一graps：
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 code：
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);
}
});
});
});
这是我的webmethod（与文本框的作品）与类：
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?
推荐答案
主要的问题是，你的文本框放置中继器控制里面，因为这个jQuery不能识别的唯一ID的控制，所以insted的jQuery的自动完成
basically problem is ,your text box is placed inside repeater control,because of this jquery not able to identify unique id for control,so insted of jquery autocomplete
尝试AutoCompleteExtender它会给你想要的输出。
try AutoCompleteExtender it will give you desire output.
这篇关于自动完成与jQuery和asp.net中继填写ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
