AJAX autocomplete ne fonctionne pas

Question

J'essaye de créer un écran simple avec ASP.NET utilisant AJAX pour le texte automatique complet de la zone de texte.

Ceci est mon code 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> 

Ceci est mon MainPageJS.js code du fichier:

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"); 
       } 
      }); 
     } 
    }); 
} 

Dans mon fichier cs j'ai un nom de fonction GetPeopleByName avec la propriété de [WebMethod] .

Mon problème est que rien ne se passe lorsque je tape quelque chose dans la zone de texte.

Qu'est-ce que je fais mal?

Merci d'avance!

Answer 1

Je l'ai résolu. J'utilise maintenant AjaxControlToolkit et ça marche très bien.

Answer 2

J'utilise ce http://leaverou.github.io/awesomplete/. :) C'est tellement facile à mettre en œuvre. Dans votre contrôleur, créez simplement une méthode JsonResult.