jquery autocomplete with an ajax call to generate the array

Question

i'm trying to do a jquery ui autocomplete with some countries i get from db with an ajax call

I'm struggling on how to pass my table of values to the autocomplete

 $( document ).ready(function() {

    $.ajax({
        url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
        type:"get",
        dataType: 'json',
        data: 'test=cool',
        async: true,
        cache: true,
        success: function(data){
            var availableTags = data;
        }
    });

    $( "#fos_user_registration_form_pays" ).autocomplete({
        source: availableTags
    });
  });

The result of my ajax call is

[{"countryName":"United States"},
 {"countryName":"Canada"},
 {"countryName":"Afghanistan"},
 {"countryName":"Albania"},
 {"countryName":"Algeria"}

Error given : availableTags is not defined

AJAX is asynchronous, you're using availableTags before the AJAX completes. jQuery Autocomplete allows you to specify an AJAX URL in the source: option, use that. — Barmar
– Barmar, Commented Nov 7, 2014 at 17:03
indeed ! but puting an url will call the ajax everytime i type aletter, right ? i'd like to load the whole array at the beginning, is it possible? or i am wrong and putting url preloads the array — oligan
– oligan, Commented Nov 7, 2014 at 17:06

MinusFour · Accepted Answer · 2014-11-07 17:19:14Z

You could use a custom function for source, which uses AJAX instead. So you don't have to synch with an AJAX call outside the scope.

$( "#fos_user_registration_form_pays" ).autocomplete({
    source: function(request, response) {
       $.ajax({
       url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
       type:"get",
       dataType: 'json',
       data: 'test=cool',
       async: true,
       cache: true,
       success: function(data){
          response(data);
       }
     });
    }
});

jQuery UI Autocomplete Source

Edit

I didn't see the comment, up until now. Answering that specific comment, you can just call autocomplete from within the AJAX.

$.ajax({
    url:Routing.generate('e_veilleur_user_register_countries_autocomplete'),
    type:"get",
    dataType: 'json',
    data: 'test=cool',
    async: true,
    cache: true,
    success: function(data){
        $( "#fos_user_registration_form_pays" ).autocomplete({
        source: data
        });
    }
});

Collectives™ on Stack Overflow

jquery autocomplete with an ajax call to generate the array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related