title: Why can't I call my jquery autocomplete after my ajax method
body: <p>I am trying to create a suggestions dropdown on my search (similar to google's). I want to make an ajax call which would call some php and return an array which would be the suggestions. Here's my code so far:</p>
  
  <p>*Note: I have not implemented my PhP yet, so I'm just pretending that my ajax was successful and returned an array called availableTags:</p>
  
  <pre><code>$(function(){
  
      var timer;
      var availableTags;
  
      var getSuggestions = function() {
  
          $.ajax(
              {
                  url: 'http://localhost/test.php',
                  type: 'GET',
                  success: function(output) 
                  {
                      alert('Success from ajax! ' + output);
                      availableTags = [ "Hello", "Hey"];
                  }
              }
          ).done(function(data) {
              $( "#f" ).autocomplete({
                  source: availableTags
              });
          });
      }
  
      $('#f').keyup(function() {
          clearTimeout(timer);
          timer = setTimeout(getSuggestions, 300);
  
      });
  
  }); 
  </code></pre>
  
  <p>My issue is that even though I am using a .done to load the autocomplete, it doesn't show the suggestions dropdown. I know my ajax function is working correctly because I've used it other places. Is there another way that I should be calling autocomplete?</p>
  
  <p>So to clarify further - I'm looking for a way to manually load the autocomplete after my ajax. Is this possible?</p>