title: AJAX autocomplete does not work
body: <p>I'm trying to create a simple screen with ASP.NET using AJAX for auto complete text from textbox.</p>
  
  <p>This is my ASPX code:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Pages/MasterPageHeader.Master" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="UBTechSite.Pages.MainPage" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainPage" runat="server"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../JSCode/MainPageJS.js"&gt;&lt;/script&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"&gt;&lt;/asp:ScriptManager&gt;
      &lt;asp:TextBox ID="txtSearch" Text="Find Person" ForeColor="Gray" runat="server" onfocus="ClearWaterMark(this);" onblur="CreatWaterMark(this);"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:Button ID="btnSearch" runat="server" Text="Search" /&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>This is my MainPageJS.js file code:</p>
  
  <pre><code>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");
                  }
              });
          }
      });
  }
  </code></pre>
  
  <p>In my cs file I have a function name GetPeopleByName with the property of [WebMethod].</p>
  
  <p>My problem is that nothing happens when I type something in the textbox.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thank you in advance!</p>