我想调用一个jquery自动完成功能,但点击一下按钮后。在按钮单击事件中,gridview和textbox是可见的,否则它们是不可见的。
以下是我的代码 脚本
$(document).ready(function () {
SearchText();
});
function SearchText()
{
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalendarDetails.aspx/GetAutoCompleteData",
data: "{'Col3':'" + document.getElementById('txtSearch').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
HTML
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label4" runat="server" Text="ID" Font-Bold="True"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Start Date" Font-Bold="True"></asp:Label>
<input type="text" id="datepickerStart" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="datepickerStart" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="End date" Font-Bold="True"></asp:Label>
<input type="text" id="datepickerEnd" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="datepickerEnd" ErrorMessage="*Mandatory field" ForeColor="Red"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
修改
<input type="text" id="txtSearch" class="autosuggest" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
<HeaderStyle BackColor="#FFCC99" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="PageIndexChanging" />
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
<br />
<br />
</div>
背后的代码
[WebMethod]
public static List<string> GetAutoCompleteData(string Col3)
{
List<string> result = new List<string>();
if ((dtClone != null) && (dtClone.Rows.Count > 0))
{
DataRow[] foundRows;
string expression = "Col3 LIKE '%" + Col3 + "%'";
// Use the Select method to find all rows matching the filter.
foundRows = dtClone.Select(expression);
for (int i = 0; i < foundRows.Length; i++)
result.Add(foundRows[i][2].ToString());
}
return result;
}
问题是在搜索操作的按钮单击事件自动完成(jquery)不起作用之后。 请帮我解决问题所在。哪里我错了
答案 0 :(得分:2)
查看代码时,您的搜索文本框似乎在更新面板之外。所以下面的代码应该可以工作:
$(document).ready(function () {
$(".autosuggest").autocomplete({
source: function (request, response) {
var col3 = $("#txtSearch").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CalendarDetails.aspx/GetAutoCompleteData",
data: { Col3: JSON.stringify(col3) },
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
},
});
});
如果搜索文本框位于更新面板内,则它将通过ajax加载,您必须将jquery事件绑定到更新面板上方的DOM元素。
更新面板包含在div中:
<div id="someDivOutsideUpdatePanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<input type="text" id="txtSearch" class="autosuggest" />
</asp:UpdatePanel>
</div>
将事件绑定到div:
$(document).ready(function () {
$("#someDivOutsideUpdatePanel .autosuggest").autocomplete({
// Same code as above
});
});