[feature request] Callback for fetching data

[mihirgokani007]

I've been comparing some popular autocomplete plugins and so far this is the best thing I've found for my project. Thanks for this really nice work :-)

One suggestion though. I can see options for using static data as a source and also using remote url to fetch data dynamically. But it'd be nice if there's some kind of callback function that one can provide to the plugin. In this way, one would be able to return the data from this callback function in any way they want (static array or some remote service or in any possible way).

I'm finding this issue because I wanted to use google map's javascript api (which returns me a list of suggestion objects) and I don't want to dive into exploring their url-based api. I would then provide a function something similar to following:

source: {
    data: function() {
        var result = [1,2,3]; // ... fetch from remote api
        return result;
    }
}

The other option would be allowing the changes to original data that we supplied to the plugin. This would allow me to do following:

var myData = [];
// ... later ...
$input.typeahead({
    // ...
    source: {
        data: myData
    }
    // ...
};
// ... later (when $input changes) ...
var result = [4,5,6]; // ... fetch from remote api
$.extend(myData, result);

Thanks.

[running-coder]

Hey mihirgokani007 thanks for using the plugin!

There is one thing to consider, I could add the possibility for data to be a function but In your case it might not be the best approach since the API response might be delayed and the execution of the rest of the code will be affected.

On an other hand, I might be able to tweak the source."group".url to fully represent a jquery ajax request. On the documentation page, the last example of the source configuration shows the possibility to do so but using success, complete, error and perhaps some formatting inside success have not been tested yet.

So your options would look something like (after a few modifications):

source: {
    teams: {
        url: [
            {
                type: "POST",
                url: "...",
                data: {myKey: "myValue"},
                success: function (data) { 
                    ... 
                    return newData;
                }
            }
        ]
    }
}

I'll not be able to test / work on it for the next couple days but perhaps you can leave me an example of API call you would like to make and see what I can do.

[mihirgokani007]

Hi @running-coder. Thanks for the quick reply.

Letting users provide full ajax config is a nice thing. But allowing them to have full control of how the data is "constructed" would be a better thing. And I feel this plugin deserves it!

I'd like to give a little hard-boiled but handy example. Let's say we have our own wrapper around jQuery's ajax which does some common actions whenever ajax call is made (e.g. logging), and we want to use that instead of $.ajax. If we could provide some kind of fetcher function to source (either data or url, but I'm inclined towards data), we could directly use our $.ajax wrapper inside that fetcher.

Let's look at one more alternative, which is just minor tweak of my previous suggestion. My previous suggestion was stupid; if we just return data, it'd be difficult to know when data has arrived. But instead, we can pass a done callback to this function, which will be called with fetched data (instead of returning that data) once the data is available. This may look something like this:

source: {
    teams: {
        data: function (done) {
            myajax({
                // ... other myajax settings ...
                logging: true,
                wait: 'Please wait...',
                success: function (data) { 
                    ... 
                    done(newData);
                }
            });
        }
    }
}

In fact, the google javascript api can be seen as a wrapper around some kind of ajax calls that it does internally. In that case also, the code would be elegant if we could provide a callback function to data, instead of calling their service url manually.

I haven't looked at the code yet, but I assume we have some kind of save function which saves data or results of url call into internal data structure. We may also use the same function to also save the newData passed to the done.

I'll also start looking at code and see if I can contribute. Weekend is not too far :-)

[running-coder]

While fixing something in 1.7.5 I've added a process parameter in the Ajax request.

LMK if it helps.

http://www.runningcoder.org/jquerytypeahead/documentation/#options-source (last example)
http://www.runningcoder.org/jquerytypeahead/demo/#form-user_v1

$.ajax($.extend({
    ...
}, ajaxObj)).done( function(data) {

    ...

    if (typeof this.process === "function") {
        data = this.process(data);
    }

    ...

}).fail( function () {
    ...
}).complete( function () {
    ...
});