Dataset API

[jharding]

We should expose an API for getting suggestions programmatically. Need to put some thought into what this API would look like exactly.

[blackxored]

$el = $('.dropdown-results');
resultsView = new DropdownView($el);

resultsView.populateResults({});
resultsView.refresh();
// or resultsView.render();

results = resultsView.results; //=> [Array of Datum]?

What do you think?

[jharding]

I wouldn't want to add anything to the global namespace. With that in mind, this is sort of what I'm thinking:

var dataset = $.typeahead.Dataset({ /* options */ });

dataset.getSuggestions('my query', function(err, suggestions) {
  // render suggestions wherever you'd like...
});

[blackxored]

I was doing something similar earlier today with UI autocomplete (more customizable at the moment, don't blame me). The API looks nice.
Ideally typeahead should support:

1. Hot-swapping of data sources in runtime, now I can't remember if you can filter by datum name, but it would be useful nevertheless.
2. Programmatic retrieval of suggestions as in your example.
3. A facet-like search (as in DocumentCloud's VisualSearch) [chore]
4. More exposed events we can tap in.
5. Either support for hotkey triggering (as Twitter does with #, @, etc) or a facade about all 4 above which does the same without pain.

What do you think?

Best Regards,

Adrian Perez
http://www.adrianperez.org
Twitter: @blackxored | Skype: blackxored | Google Voice: (559) 744 3201

Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Thursday, March 7, 2013 at 1:43 AM, Jake Harding wrote:

I wouldn't want to add anything to the global namespace. With that in mind, this is sort of what I'm thinking:
var dataset = $.typeahead.Dataset({ /* options */ }); dataset.getSuggestions('my query', function(err, suggestions) { // render suggestions wherever you'd like... });

—
Reply to this email directly or view it on GitHub (#95 (comment)).

[brianmhunt]

Sorry I am not familiar with the code base, but could one have local in a datum take a function that is called whenever the query is activated? This seems most intuitive to me.

Alternatively having datum take another argument, such as computed?

[jharding]

Just to make sure I'm clear, are you suggesting something like:

$('.typeahead').typeahead({
  local: function(query) {
    // return data
  }
});

That could work – I'd have to think about it some more though to make sure it'd fit into how things are currently implemented.

[brianmhunt]

Yes, exactly. Or a computed field that only takes a function, and local only taking an array.

Personally I like a single argument, such as local, that figures out what to do based on the argument type, But I thought to suggest the alternative, in case it suits the intended design better – notably since remote and local could be passed as one argument and similarly distinguished by type (remote always being a string, local always an array). This is not as future-proof as specifying an explicit type e.g. a computed argument that looks like this:

$('.typeahead').typeahead({
  computed: function(query) {   /* return data */  },
});

or if you are thinking of an asynchronous version (which would be the javascriptish way ☕),

$('.typeahead').typeahead({
  async_computed: function(query, callback) {   /* callback(data) */  },
});

[jharding]

From #15 (comment)

Considering the dataset component and its dependencies account for probably less than half of the source code, we'll probably want to generate something like typeahead_dataset.js so devs like yourself can take advantage of this functionality without having to load all of the code for the UI components.

[bchristopher]

As is the case where the API allows the download of a sizable data file and that the data needed is already in local storage, my vote would be for query something like this:

$('.twitter-typeahead').typeahead('customQuery', 'query goes here', keysToSearch: "values", "customKey1", "tokens", template: customTemplate, function($e) ) {

returnedObjects = $e.dataset;
renderedTemplate = $e.renderedTemplate

}

[gemshare-jonathan]

Hi @jharding, I have an use case that I want to run by you - I want to use 2 (maybe 3) datasets, 1 calling my backend (remote, url with beforeSend), another to call a 3rd party API that is not as simple as remote with an url - for example, Google Places's radarSearch.

Would this use case be supported once Dataset API is in? And when would Dataset API be available?

Thanks

[jharding]

You should be able to do that now. Unless I'm missing something, I don't see why you would need the dataset API.

[gemshare-jonathan]

thanks for quick reply, how do I wire up against Google Places (without dataset API that calls a function similar to Bootstrap typeahead's source).

[jharding]

I'm not familiar with the Google Places API, but you'll probably want to do something like:

$('.typeahead').typeahead({
  remote: {
    url: 'http://googleplaces.com/search?q=%QUERY',
    filter: function(resp) {
      // transform response to be typeahead.js compatible
    }
  }
});

[gemshare-jonathan]

unfortunately Google Places doesn't expose a query URL like that.

var map = ...
var request = {
    bounds: map.getBounds(),
    keyword: 'twitter HQ'
};
var service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);

the query goes into that request.

in that callback it returns status and array of results

[jharding]

Hmm yeah there's not a great way of dealing with that currently. That's a good use case for adding something like source, but I'm not sure when that would happen. I haven't had much time to work on typeahead.js lately and I haven't really planned the upcoming releases yet.

If you'd like, create a separate issue for adding source and I'll use that to track it.

[gemshare-jonathan]

Got it. I don't know from library design point of view what's the best way to support this, a local with a function, or a distinct source that's similar to Bootstrap typeahead's source. Similar to remote's filter, this use case still needs to format results to make them typeahead.js compatible.

I will file a request and reference this. eagerly waiting for this awesome update :)

[timtrueman]

I would make sure the query is included since suggestions could come back late and not match the query, e.g.

var dataset = $.typeahead.Dataset({ /* options */ });

dataset.getSuggestions('my query', function(err, query, suggestions) {
  // render suggestions wherever you'd like...
});

[nagiek]

FYI, Google Places does expose a REST API.

https://developers.google.com/places/documentation/autocomplete

[gemshare-jonathan]

@nagiek yes. however Google Places REST API does not allow cross domain calls. It's meant for server side calls. For JavaScript they have a library, which is why we need a function call like source.

[timtrueman]

I plan on working on this during hackweek (July 8-12), potentially with @jasdev if he'd like to pair on it. Voice any ideas, suggestions, or concerns now if you've got a vested interested in using this.

[jasdev]

@timtrueman sure! I'll be OOO on Tues. of that week for DBX but definitely willing to help.

[wyaeld]

👍 on this. I'm using the computed function to return actions someone might want to take from the typeahead based on the query, and other datasets for results they will be able to navigate to

[bordoni]

Looking forward to use this, would be really nice to grab a dataset "on the fly";

[mandersondesign]

Any update on this issue? It would be really helpful to be able to grab the dataset, so that I can verify that the result chosen by the use is in the suggestion list.

[blackxored]

I'm still waiting on this too. I've since switched back to UI autocomplete
just because I get more override control.
On Oct 31, 2013 9:08 PM, "Michael Anderson" notifications@github.com
wrote:

Any update on this issue? It would be really helpful to be able to grab
the dataset, so that I can verify that the result chosen by the use is in
the suggestion list.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/95#issuecomment-27522920
.

[mandersondesign]

So i have two sort of hacky solutions for this:

1. At the time of submitting the form, check that the name in the tag matches an entry in the database. This requires an ajax call on validation.

2. At the time of

.on('typeahead:selected', function(e, d, data_set) {
    // right here I want to run an ajax call to make sure its a valid item name in the db 
    // and if so, then push the Tag.
    $("#playGameTag").tagsManager("pushTag", d.value);
  });