我正在尝试使用AJAX创建一个简单的屏幕,使用AJAX从文本框中自动完成文本。
这是我的ASPX代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/Pages/MasterPageHeader.Master" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="UBTechSite.Pages.MainPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainPage" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../JSCode/MainPageJS.js"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:TextBox ID="txtSearch" Text="Find Person" ForeColor="Gray" runat="server" onfocus="ClearWaterMark(this);" onblur="CreatWaterMark(this);"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search" />
</asp:Content>
这是我的MainPageJS.js文件代码:
function ClearWaterMark(ctrl) {
if (ctrl.value == "Find Person") {
ctrl.value = "";
ctrl.style.color = "black";
}
}
function CreatWaterMark(ctrl) {
if (ctrl.value.length == 0) {
ctrl.value = "Find Person";
ctrl.style.color = "gray";
}
}
$(document).ready(function () {
SearchPerson();
});
function SearchPerson() {
$("#txtSearch").autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "MainPage.aspx/GetPeopleByName",
data: '{name: "' + $("input[id$=txtSearch]").val() + '" }',
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("No Match");
}
});
}
});
}
在我的cs文件中,我有一个函数名称GetPeopleByName,其属性为[WebMethod]。
我的问题是当我在文本框中输入内容时没有任何反应。
我做错了什么?
提前谢谢!
答案 0 :(得分:0)
我正在使用此http://leaverou.github.io/awesomplete/。 :)它很容易实现。在你的控制器中,只需创建一个JsonResult方法。
答案 1 :(得分:0)
我解决了。
我现在正在使用AjaxControlToolkit,它运行正常。