JQuery autocomplete source from another js function

Question

I have a Jquery autocomplete function whose source is calculated from another function based on request.term so i can not figure how to set source property right.

Autocomplete:

$( "#finder_city" ).autocomplete({
    source: function(request){
        var searchParam  = request.term;
        init(searchParam);
    },
    minLength: 2,
});

My function:

function init(query) {
//lot of code 
return response;

}

My function returns valid data, like response = [ city1, city2, city3 ]; but autocomplete just start "Loader icon" and nothing happens, no err in log.

Can anybody say how to set source from another js function ?

Arun P Johny · Accepted Answer · 2013-09-13 11:46:33Z

7

The source function has two params, request and a callback, once the response comes back you need to call the callback

$( document ).ready(function() {

    $( "#finder_city" ).autocomplete({
        source: function(request, callback){
            var searchParam  = request.term;
            init(searchParam, callback)
        },
        minLength: 2
    });
});

function init(query, callback) {
    ymaps.geocode(query, { results: 5 }).then(function (res) {

        var response = [];
        if (res.geoObjects.get(0) == null) {

        }
        else if (res.geoObjects.get(1) == null){
            response = [
                res.geoObjects.get(0).properties.get('text')
            ];
        }
        else if (res.geoObjects.get(2) == null){
            response = [
                res.geoObjects.get(0).properties.get('text'),
                res.geoObjects.get(1).properties.get('text')
            ];
        }
        else if (res.geoObjects.get(3) == null){
            response = [
                res.geoObjects.get(0).properties.get('text'),
                res.geoObjects.get(1).properties.get('text'),
                res.geoObjects.get(2).properties.get('text')
            ];
        }
        else if (res.geoObjects.get(4) == null){
            response = [
                res.geoObjects.get(0).properties.get('text'),
                res.geoObjects.get(1).properties.get('text'),
                res.geoObjects.get(2).properties.get('text'),
                res.geoObjects.get(3).properties.get('text')
            ];
        }
        else {
            response = [
                res.geoObjects.get(0).properties.get('text'),
                res.geoObjects.get(1).properties.get('text'),
                res.geoObjects.get(2).properties.get('text'),
                res.geoObjects.get(3).properties.get('text'),
                res.geoObjects.get(4).properties.get('text')
            ];
        }
        callback(response);
    });
}

Demo: Fiddle

edited Sep 13, 2013 at 11:46

answered Sep 12, 2013 at 15:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lesnick Over a year ago

Hi ty now i understand. i check it on non asynchronous function and its ok. But my method is async, it load data from js api. Is there a solution for asynchronous method ?

Arun P Johny Over a year ago

you need to share the init method

lesnick Over a year ago

I simplified it a bit, but here is code - jsfiddle.net/lesnick/gxW8c pay attention to js included in html it`s js API something like Google Maps API. Try to enter "New York" in field it will console.log() response

lesnick Over a year ago

It works just perfect! Thank you very much! So as i understand callback have to recive data in init function, but i dont shure why. Can you provide me any links or direction to search?

Arun P Johny Over a year ago

@lesnick you can look at how to process async response... this is a normal scenario in ajax based development environments

|

Paul · Accepted Answer · 2013-09-12 15:56:33Z

0

In your anonymous callback, you need to return the return value of init(searchParam).

Just change:

init(searchParam);

To:

return init(searchParam);

answered Sep 12, 2013 at 15:56

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

Eduardo Cuomo · Accepted Answer · 2014-08-26 13:59:57Z

0

Example:

source: function (request, response) { // Contains
    var searchString = request.term,
        array = [];

    // OPTIONS
    array.push('test 1');
    array.push('foo');
    array.push('var');

    response(array);
}

answered Aug 26, 2014 at 13:59

Eduardo Cuomo

19.2k7 gold badges121 silver badges98 bronze badges

Collectives™ on Stack Overflow

JQuery autocomplete source from another js function

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related