title: WCF and jQuery autocomplete plugin
body: <p>Good afternoon</p>
  
  <p>I'm facing a trouble, trying to figure out how to use this <a href="http://view.jquery.com/trunk/plugins/autocomplete/demo/" rel="nofollow">autocomplete plugin</a> and make it consume my WCF service method. The WCF is correctly published and working.</p>
  
  <p>What can be done to autocomplete plugin work or is there another clever way to make autocomplete work with WCF and get chosen Person.Id and Person.Name?</p>
  
  <p>Below some things I've been working by now:</p>
  
  <p><em>WCF Service</em></p>
  
  <pre><code>public class Person {
      public int Id {get;set;}
      public string Name {get;set;}
      public static List&lt;Person&gt; List(){
        /*long query supressed to no be annoying :) */
      }
  }
  
  [ServiceContract]
  public interface IChatService
  {
      [OperationContract]
      [WebInvoke(Method = "GET", 
       UriTemplate = "GetPeople", 
       BodyStyle = WebMessageBodyStyle.Bare, 
       ResponseFormat = WebMessageFormat.Json)]
      List&lt;Person&gt; GetPeople();
  }
  
  public class MyService : IMyService
  {
      public List&lt;Person&gt; GetPeople()
      {
          return Person.List();
      }
  }
  </code></pre>
  
  <p><em>Now the aspx page:</em></p>
  
  <pre><code>....
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/jquery.ajaxQueue.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='http://view.jquery.com/trunk/plugins/autocomplete/lib/thickbox-compressed.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='http://view.jquery.com/trunk/plugins/jquery.autocomplete.js'&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/jquery.autocomplete.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://view.jquery.com/trunk/plugins/lib/thickbox.css" /&gt;
  
  &lt;script&gt;
      $().ready(function () {
          $('#&lt;%=peopleNames.ClientID%&gt;').autocomplete("http://localhost/MyService/MyService.svc/GetPeople", {
              width: 260,
              selectFirst: false
          });
          $("#&lt;%=peopleNames.ClientID%&gt;").result(function (event, data, formatted) {
              alert('ok');
              if (data) {
                  alert($(this).parent().next().find("input").val(data[1]));
              }
          });
    });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form runat="server"&gt;
  &lt;asp:TextBox ID="peopleNames" runat="server" MaxLength="500"&gt;&lt;/asp:TextBox&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Just for testing purpose, the idea is to let web user type a name, and jQuery would call WCF service <a href="http://localhost/MyService/GetPeople" rel="nofollow">http://localhost/MyService/GetPeople</a> to list all people in SQL Server database (in future GetPeople method will have a string argument).</p>
  
  <p>The jquery <strong>autocomplete</strong> plugin seems to be good, but I'm not sure yet which js files I'll need to make it work on my local computer. And now I can't make it work or debug it, even when it comes to show an alert();</p>