DannyD
DannyD

Reputation: 2881

Why can't I call my jquery autocomplete after my ajax method

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:

*Note: I have not implemented my PhP yet, so I'm just pretending that my ajax was successful and returned an array called availableTags:

$(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);

    });

}); 

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?

So to clarify further - I'm looking for a way to manually load the autocomplete after my ajax. Is this possible?

Upvotes: 0

Views: 726

Answers (1)

dizel3d
dizel3d

Reputation: 3669

I think, this is what you want (example):

$('#f').autocomplete({
    delay: 300,
    source: function(request, response) {
        $.get('http://localhost/test.php', {
            q: request.term
        }).success(function(availableTags) {
            response(availableTags);
        });
    }
});

Upvotes: 1

Related Questions