AJAX自动完成功能不起作用

时间:2017-07-24 04:19:02

标签: c# asp.net autocomplete webforms asp.net-ajax

我正在尝试使用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]。

我的问题是当我在文本框中输入内容时没有任何反应。

我做错了什么?

提前谢谢!

2 个答案:

答案 0 :(得分:0)

我正在使用此http://leaverou.github.io/awesomplete/。 :)它很容易实现。在你的控制器中,只需创建一个JsonResult方法。

答案 1 :(得分:0)

我解决了。

我现在正在使用AjaxControlToolkit,它运行正常。