title: Materialize autocomplete with dynamic data in jquery ajax
body: <p>I'm using materialize ui in an ASP.Net MVC application and I'm using an autocomplete control with dynamic data.</p>
  
  <p>Here is my code,</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col s12"&gt;
          &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                  &lt;i class="material-icons prefix"&gt;textsms&lt;/i&gt;
                  &lt;input type="text" id="autocomplete-input" class="autocomplete"&gt;
                  &lt;label for="autocomplete-input"&gt;Autocomplete&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the jquery ajax call,</p>
  
  <pre><code>$(function () {
      $.ajax({
          type: 'GET', // your request type
          url: "/Home/GetData/",
          success: function (response) {
              var myArray = $.parseJSON(response);
  
              debugger;
              $('input.autocomplete').autocomplete({
                  data: {
                      "Arizona (1)": null,
                      "Florida (2)": null,
                      "Georgia (3)": null,
                      "Hawaii(4)": null, 
                      "Idaho (5)": null,
                      "Illinois (6)": null
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p>It can accept data only in this format and this is my response,</p>
  
  <pre><code>"[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii (4)"],["Idaho (5)"],["Illinois (6)"]]"
  </code></pre>
  
  <p>How do I convert my response into the format that autocomplete understands?</p>