title: jquery autocomplete to fill a javascript array?
body: <p>I wanted to add autocomplete to a text box I had on my form.  I found an excellent SO thread that entailed this right here: <a href="https://stackoverflow.com/a/5973017/168703">https://stackoverflow.com/a/5973017/168703</a>  This was exactly what I needed because it also only showed the autocomplete when someone typed an <code>@</code> symbol.</p>
  
  <p>It was something to the effect of this:</p>
  
  <pre><code>$("#ucAddActionItemIssueActions_txtActionItem")
  // don't navigate away from the field on tab when selecting an item
  .bind("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &amp;&amp; $(this).data("autocomplete").menu.active) {
          event.preventDefault();
      }
  }).autocomplete({
      minLength: 0,
      source: function(request, response) {       
          var term = request.term,
              results = [];
          if (term.indexOf("@") &gt;= 0) {
              term = extractLast(request.term);
              if (term.length &gt; 0) {
                  results = $.ui.autocomplete.filter(
                  availableTags, term);
              } else {
                  results = ['Start typing...'];
              }
          }
          response(results);
      },
      focus: function() {
          // prevent value inserted on focus
          return false;
      },
      select: function(event, ui) {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          var email = GetEmail(ui.item.value);
          email = email + ";";
          emails.push(email);
          $("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join("");
          return false;
      }
  });
  </code></pre>
  
  <p>Pay close attention to the <code>source</code> portion as it forced me to declare something like this:</p>
  
  <pre><code>var availableTags = [
                              "jdoe",
                              "tsmith",
                              "mrighty",
                              "tstevens",
                              "ktripp",
                              "tram",
  
                          ];
  </code></pre>
  
  <p>That is my autocomplete suggestions would be inside of the js file...but this is the only part I did not want.  I have to load the data from a database.  Unfortunately I am dealing with an ancient .net framework prolly pre 2.0 app.  Its vb.net and there is no linq or lists or all the good stuff.  Fine I thought..I could probably create a <code>.asmx</code> file that added strings to an array list, converted it back to a string array and returned it in the .asmx file.  Something to this effect (this was just a test no pulling data just yet from a database):</p>
  
  <pre><code>Imports System.Web.Services
  Imports System.Collections
  
  
  &lt;System.Web.Services.WebService(Namespace := "http://tempuri.org/myapp.com/GetLogins")&gt; _
  Public Class GetLogins
      Inherits System.Web.Services.WebService
  
  #Region " Web Services Designer Generated Code "
  
      Public Sub New()
          MyBase.New()
  
          'This call is required by the Web Services Designer.
          InitializeComponent()
  
          'Add your own initialization code after the InitializeComponent() call
  
      End Sub
  
      'Required by the Web Services Designer
      Private components As System.ComponentModel.IContainer
  
      'NOTE: The following procedure is required by the Web Services Designer
      'It can be modified using the Web Services Designer.  
      'Do not modify it using the code editor.
      &lt;System.Diagnostics.DebuggerStepThrough()&gt; Private Sub InitializeComponent()
          components = New System.ComponentModel.Container()
      End Sub
  
      Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
          'CODEGEN: This procedure is required by the Web Services Designer
          'Do not modify it using the code editor.
          If disposing Then
              If Not (components Is Nothing) Then
                  components.Dispose()
              End If
          End If
          MyBase.Dispose(disposing)
      End Sub
  
  #End Region
  
      ' WEB SERVICE EXAMPLE
      ' The HelloWorld() example service returns the string Hello World.
      ' To build, uncomment the following lines then save and build the project.
      ' To test this web service, ensure that the .asmx file is the start page
      ' and press F5.
      '
  
      'Public Function HelloWorld() As String
      '   Return "Hello World"
      'End Function
      &lt;WebMethod()&gt; _
      Public Function GetLogins() As String()
          Dim myList As ArrayList
          myList.Add("jstevens")
          myList.Add("jdoe")
  
          Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
          Return arr
      End Function
  End Class
  </code></pre>
  
  <p>As mentioned this was just a test so I'm just adding two items in a string array and returning it.  Now I am pretty unsure how to change my jquery code to incorporate this....
  I thought I would add something like this:</p>
  
  <pre><code>$.ajax({
              url: "GetLogins.asmx/GetLogins",
              data: "{ 'resName': '" + request.term + "' }",
              datatype: "json",
              type= "POST",
              contentType: "application/json; charset=utf-8"
              })
  </code></pre>
  
  <p>But I am not sure how to incorporate that in the original jquery as my jquery skills are zilch...
  Can anyone help me understand this and put this together so it may actually work.  Once I get the test working I can then modify it to pull data from the database.  Am I on the right path?</p>
  
  <p><H2>EDIT</H2></p>
  
  <p>Here's what I have</p>
  
  <pre><code>$("#ucAddActionItemIssueActions_txtActionItem")
  // don't navigate away from the field on tab when selecting an item
  .bind("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &amp;&amp; $(this).data("autocomplete").menu.active) {
          event.preventDefault();
      }
  }).autocomplete({
      minLength: 0,
     source: function (request, response) {
          //get client value
          var c = $("#ucAddActionItemIssueActions_ddlClientAssignTo").val();
          var params= '{"ClientID":"' + c + '"}';
          $.ajax({
              url: "GetLogins.asmx/GetLogins",
              data: params,
              dataType: "json",
              type: "POST",
              contentType: "application/json; charset=utf-8",
              dataFilter: function (data) { return data; },
              success: function (data) {
                  response($.map(data.d, function (item) {
                      return {
                          value: item.name
                      }
                  }))
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
                  alert(textStatus);
              }
          });},
      focus: function() {
          // prevent value inserted on focus
          return false;
      },
      select: function(event, ui) {
          var terms = split(this.value);
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push(ui.item.value);
          var email = GetEmail(ui.item.value);
          email = email + ";";
          emails.push(email);
          $("#ucAddActionItemIssueActions_hdnEmails").val(emails.join(""));
          // add placeholder to get the comma-and-space at the end
          terms.push("");
          this.value = terms.join("");
          return false;
      }
  });
  </code></pre>
  
  <p>But my app is throwing an internal server error 500.  With the following exception:</p>
  
  <blockquote>
    <p>System.InvalidOperationException: Request format is invalid:
    application/json; charset=UTF-8.   at
    System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()   at
    System.Web.Services.Protocols.WebServiceHandler.Invoke()   at
    System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()</p>
  </blockquote>
  
  <p>Here is my webservice:</p>
  
  <pre><code>Imports System.Web.Services
  Imports System.Collections
  &lt;System.Web.Services.WebService(Namespace := "http://tempuri.org/quikfix.jakah.com/GetLogins")&gt; _
  Public Class GetLogins
      Inherits System.Web.Services.WebService
  
      &lt;WebMethod()&gt; _
      Public Function GetLogins(ByVal ClientID As Integer) As String()
          Dim myList As New ArrayList
          myList.Add("jstevens")
          myList.Add("jdoe")
          myList.Add("smartin")
  
          Dim arr() As String = CType(myList.ToArray(Type.GetType("System.String")), String())
          Return arr
      End Function
  End Class
  </code></pre>
  
  <p>Again this is an old 1.1 .net application, do I need something in the web config file to represent this .asmx file?   The parameters in the web method match the parameters of the ajax call so what could be causing this?</p>