New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using an async function as a data source #198

Closed
rcarickhoff opened this Issue May 11, 2016 · 8 comments

Comments

Projects
None yet
3 participants
@rcarickhoff

rcarickhoff commented May 11, 2016

I have a requirement to use a dynamic data source from a web service that is fairly complicated (not a REST API). I am trying to use a function as a data source so I have a hook to make a call to the service for data. I see the source.data documentation says it can be an array or function that returns an array but am unable to get the function that returns an array to work.

Question 1: Is this supported and if so is there an example or some documentation on how to get it to work?

Question 2: Is there a better way to get to get a dynamic data source working without using the ajax option on the source object?

@rcarickhoff

This comment has been minimized.

rcarickhoff commented May 11, 2016

One other comment on this... Found this thread discussing this concern. #13

A common async implementation for providing data is to pass in a callback that the custom data function calls when data is ready. I was hoping this is what the documentation is suggesting when it says a function is supported.

@running-coder

This comment has been minimized.

Owner

running-coder commented May 11, 2016

Hey, the data parameter only support synchronous data atm through an array or function as you noticed while ajax allows asynchronous. As an example, which transport would you use inside an asynchronous data param?

@rcarickhoff

This comment has been minimized.

rcarickhoff commented May 11, 2016

I have a few objects that wrap ajax calls to get data. Each exposes the same method that can be called to get different types of data. I would like to use this layer with typeahead. So ideally there is an abstraction between the typeahead plugin and ajax calls for data. I guess this would be similar to Twitter's Bloodhound. Basically, the typeahead plugin works with a class that can have different implementations of remote data access as long as the the same inputs and outputs are implemented. An async data function would be a simpler way to get this same functionality. Any thoughts on how I may be able to implement this?

@running-coder

This comment has been minimized.

Owner

running-coder commented May 11, 2016

Sure, totally makes sense to be able to use other ways of getting the data. If you wanna take a shot at it feel free to open a PR, or I'll see what I can do in a couple of days.

Thanks!

@running-coder running-coder changed the title from Using a function as a data source to Using an async function as a data source May 11, 2016

@running-coder running-coder added this to the 2.7.0 milestone May 11, 2016

@rcarickhoff

This comment has been minimized.

rcarickhoff commented May 11, 2016

Sounds good, thanks. It would be much faster for you to add it if you have the time but if you can't get to it, I can take a crack at it. I am thinking just allowing something like function(query, callback) to be set on the data property or something similar for dynamic use.

samlanning added a commit to samlanning/jquery-typeahead that referenced this issue Jun 29, 2016

samlanning added a commit to samlanning/jquery-typeahead that referenced this issue Jun 29, 2016

running-coder added a commit that referenced this issue Jul 10, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 10, 2016

Sorry it took quite some time @rcarickhoff @samlanning.

The feature is now in the develop branch waiting for the rest of the 2.7.0 features before it's merged to master

You can now use the source.group.data option as an async object to gather your data in any way possible. The only requirement is to create a $.Deferred jquery object and return it

source: {
    teams: {
        data: function () {

            var deferred = $.Deferred();

            // Gather your data, and resolve the deferred object with an array of objects
            // setTimeout is used only to show that the data is async, received after 2 seconds in my demo
            setTimeout(function () {
                deferred.resolve(data)
            }, 2000);

            deferred.always(function () {
                console.log('yay! :D')
            });

            return deferred;
        }
    }
},

Let me know if you have any question / issues

Thanks!

running-coder added a commit that referenced this issue Aug 2, 2016

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default
@RohiniJindam

This comment has been minimized.

RohiniJindam commented May 7, 2018

Can you please share your thoughts on how I can access the query parameter inside the source.group.data option function while using the deferred function? Or Can i use the deferred method in ajax? @running-coder @rcarickhoff

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 20, 2018

@RohiniJindam this.query should be accessible from any function set in your initialization object

source: {
  group: {
    data: function () {
      console.log(this.query);
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment