title: JQuery UI autocomplete using AJAX and ASP.NET WebService
body: <p>Implementing JQuery autocomplete using AJAX</p>
  
  <p>I am having difficulties to make this program work.
  what i'm trying to do is implementing autocomplete using JQuery UI API and getting the result from AJAX Enabled WCF service.</p>
  
  <p>I believe that my problem is reaching the Web Service (if I implement it as asmx instead of svc it seems to be working)</p>
  
  <p>Default.aspx</p>
  
  <pre><code>&lt;%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
      CodeBehind="Default.aspx.cs" Inherits="SandwichServices._Default" %&gt;
  
  &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;
      &lt;script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="Styles/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script language="javascript" type="text/javascript"&gt;
  // &lt;![CDATA[
          $(document).ready(function () {
              $(".searchinput").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          type: "POST",
                          contentType: "application/json; charset=utf-8",
                          url: "~/CostService.svc/GetAllPredictions",
                          data: "{'keywordStartsWith':'" + request.term + "'}",
                          dataType: "json",
                          async: true,
                          success: function (data) {
                              response(data.d);
                          },
                          error: function (result) {
                              alert("Due to unexpected errors we were unable to load data");
                          }
                      });
                  },
                  minLength: 2
              });
          });
  
  // ]]&gt;
      &lt;/script&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
      &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
          &lt;Services&gt;
              &lt;asp:ServiceReference Path="CostService.svc" /&gt;
          &lt;/Services&gt;
      &lt;/asp:ScriptManager&gt;
      &lt;div class="ui-widget"&gt;
          &lt;asp:Label ID="lblSearch" Text="Search" AssociatedControlID="txbSearchKeyword" runat="server"&gt;&lt;/asp:Label&gt;
          &lt;asp:TextBox ID="txbSearchKeyword" runat="server" CssClass="searchinput"&gt;&lt;/asp:TextBox&gt;
          &lt;asp:Button ID="Button2" Text="Go!" runat="server" OnClick="Search_Click" /&gt;
      &lt;/div&gt;
      &lt;asp:Literal ID="litStatus" runat="server"&gt;&lt;/asp:Literal&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>Default.aspx.cs</p>
  
  <pre><code>using System;
  
  namespace SandwichServices
  {
      public partial class _Default : System.Web.UI.Page
      {
          protected void Page_Load(object sender, EventArgs e)
          {
  
          }
  
          protected void Search_Click(object sender, EventArgs e)
          {
              litStatus.Text = "Search conducted for keyword: " + txbSearchKeyword.Text;
          }
      }
  }
  </code></pre>
  
  <p>CostService.svc.cs</p>
  
  <pre><code>using System.Collections.Generic;
  using System.Linq;
  using System.ServiceModel;
  using System.ServiceModel.Activation;
  
  namespace SandwichServices
  {
      [ServiceContract(Namespace = "SandwichServices")]
      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
      public class CostService
      {
          private readonly List&lt;string&gt; _names = new List&lt;string&gt; // dummy list
                                           {
                                               "one",
                                               "one111",
                                               "one2222",
                                               "one4444",
                                           };
  
          [OperationContract]
          public IList&lt;string&gt; GetAllPredictions(string keywordStartsWith)
          {
              IList&lt;string&gt; output = (from c in _names
                                      where c.Contains(keywordStartsWith)
                                      select c).ToList();
              return output;
          }
      }
  }
  </code></pre>
  
  <p>web.config:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  
  &lt;!--
    For more information on how to configure your ASP.NET application, please visit
    http://go.microsoft.com/fwlink/?LinkId=169433
    --&gt;
  
  &lt;configuration&gt;
    &lt;connectionStrings&gt;
      &lt;add name="ApplicationServices"
           connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
           providerName="System.Data.SqlClient" /&gt;
    &lt;/connectionStrings&gt;
  
    &lt;system.web&gt;
      &lt;compilation debug="true" targetFramework="4.0" /&gt;
  
      &lt;authentication mode="Forms"&gt;
        &lt;forms loginUrl="~/Account/Login.aspx" timeout="2880" /&gt;
      &lt;/authentication&gt;
  
      &lt;membership&gt;
        &lt;providers&gt;
          &lt;clear/&gt;
          &lt;add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
               enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
               maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
               applicationName="/" /&gt;
        &lt;/providers&gt;
      &lt;/membership&gt;
  
      &lt;profile&gt;
        &lt;providers&gt;
          &lt;clear/&gt;
          &lt;add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/&gt;
        &lt;/providers&gt;
      &lt;/profile&gt;
  
      &lt;roleManager enabled="false"&gt;
        &lt;providers&gt;
          &lt;clear/&gt;
          &lt;add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" /&gt;
          &lt;add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" /&gt;
        &lt;/providers&gt;
      &lt;/roleManager&gt;
  
    &lt;/system.web&gt;
  
    &lt;system.webServer&gt;
       &lt;modules runAllManagedModulesForAllRequests="true"/&gt;
    &lt;/system.webServer&gt;
    &lt;system.serviceModel&gt;
      &lt;behaviors&gt;
        &lt;endpointBehaviors&gt;
          &lt;behavior name="SandwichServices.CostServiceAspNetAjaxBehavior"&gt;
            &lt;enableWebScript /&gt;
          &lt;/behavior&gt;
        &lt;/endpointBehaviors&gt;
      &lt;/behaviors&gt;
      &lt;serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" /&gt;
      &lt;services&gt;
        &lt;service name="SandwichServices.CostService"&gt;
          &lt;endpoint address="" behaviorConfiguration="SandwichServices.CostServiceAspNetAjaxBehavior"
            binding="webHttpBinding" contract="SandwichServices.CostService" /&gt;
        &lt;/service&gt;
      &lt;/services&gt;
    &lt;/system.serviceModel&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong>
  Console says:</p>
  
  <blockquote>
    <p>"POST <a href="http://XXXXXX:7070/~/CostService.svc/GetAllPredictions" rel="nofollow noreferrer">http://XXXXXX:7070/~/CostService.svc/GetAllPredictions</a> 404 (Not Found) "</p>
  </blockquote>
  
  <p>how can I reach it?</p>