AJAX 自动完成不起作用

Question

我正在尝试使用 ASP.NET 创建一个简单的屏幕，使用 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] 的属性。

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

我做错了什么？

提前致谢！

Answer 1

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

Answer 2

我解决了

我现在正在使用 AjaxControlToolkit，它工作正常。

AJAX 自动完成不起作用

AJAX autocomplete does not work

c#

asp.net

webforms

autocomplete

asp.net-ajax