title: Using AJAX to get dynamic data for Materialize autocomplete
body: <p>​i've been struggling with this problem for the past 3 days or so and i'm wondering if anyone could help me with this. i have a form that has a textbox using autocomplete. what i want is to have the textbox get the data from an AJAX function and not just static data.</p>
  <p>Based on the Materialize <a href="https://materializecss.com/autocomplete.html" rel="nofollow noreferrer">documentation</a>, the way to get static data is by passing an object as the second argument upon initialization of an autocomplete instance:</p>
  <pre><code>let elem = document.querySelector('#brand');
  
  let instance = M.Autocomplete.init(elem, { data: { &quot;Apple&quot;: null, &quot;Microsoft&quot;:null} });
  </code></pre>
  <p>​</p>
  <p>Now since i want to use AJAX for dynamic data, i made an AJAX function and also another function to pass the data from the AJAX function to after success (this is to bypass the problem with using asyncronous functions), like so:</p>
  <pre><code>function ajaxCall() {
  
     $.ajax({
              type: 'GET',
              url: 'showBrands',
              dataType: 'json',
              success: passData
  
          });
  
  }
  
  function passData(data) {
  
    return data;
  
  }
  </code></pre>
  <p>After which, i tried to do the following but no luck though.</p>
  <pre><code>let elem = document.querySelector('#brand');
  
  let instance = M.Autocomplete.init(elem, { data: ajaxCall() });
  </code></pre>
  <p>Am i doing something wrong here? Or is there a better approach? Any help is greatly appreciated. thanks in advance!</p>