MouseEnter & Typeahead: Selected Custom Queries

[bchristopher]

I'm having a great time working with typeahead.js. Intelligent queries, prefetch and local storage has gotten me busy building a prototype. Brilliant.

I'm currently using it to display items within categories, lot's of categories with subcategories. Since the dropdown needs to be limited in number of items and each subcategory has no more that 15 items there are two things I would like to try to launch a submenu using the following process:

1. Retrieve the current datum object, preferably during mouse-enter/over event. If that's not currently possible, use "typeahead: selected" (currently doing this), but keep the drop-down from closing if a submenu is open.

2. Launch a custom query based upon the selected datum

3. Display the selected objects in a submenu.

I can handle the submenu (item 3). Are items 1 and 2 possible at this time? I'm almost there and hoping I can hack it out if possible. Should I look at the undocumented setQuery that you just released? Not sure how to use it.

Thanks,

B

[jharding]

1. Retrieve the current datum object, preferably during mouse-enter/over event. If that's not currently possible, use "typeahead: selected" (currently doing this), but keep the drop-down from closing if a submenu is open.

I've considered adding some sort of mouseover/mouseleave events, but I need to think it through some more.

The good news is that I think I have a hack that may work for you. Each suggestion in the dropdown menu has a data property named suggestion which contains the datum it represents. So you could implement typeahead:mouseover by doing something like:

$('.twitter-typeahead').on('mouseover', '.tt-suggestion', function($e) {
  var $suggestion = $($e.currentTarget),
      datum = $suggestion.data('suggestion').datum;

  $suggestion.trigger('typeahead:mouseover', datum);
});

There's no guarantee that this will be compatible with future versions of typeahead.js, but it should work for now.

2. Launch a custom query based upon the selected datum

Feel free to use setQuery, the reason it's not documented is because I'd like to get some feedback on it before I make it official. This is how you would use it:

$('.typeahead').typeahead('setQuery', 'query goes here');

Hope this helped.

[bchristopher]

@jharding ,

I was able to get the submenu to attach and retrieve the datum object using on-mouse events. When I added the setQuery function I didn't realize at the time that it would render a display in the main window and change the query. I was hoping to render the returned data objects from setQuery into the new submenu:

The code below is around line 979 in the function _getSuggestions:

                dataset.getSuggestions(query, function(suggestions) {
                    if (query === that.inputView.getQuery()) {
                        that.dropdownView.renderSuggestions(dataset, suggestions);
                    }
                });

The data objects I would like returned are in the variable "suggestions". Is there an easy way I could call getSuggestions directly? I could check for a new parameter and bypass "renderSuggestions" above. Something like:

 returnedDataObjects = $('.typeahead').typeahead('getSuggestions', 'query goes here', false);

Where "false" would be the new bypass parameter.

Thanks,
B

[jharding]

Is there an easy way I could call getSuggestions directly?

Not yet. I'm using #95 to track exposing the dataset API.

[bchristopher]

OK. I will post there.... Thanks.

[jharding]

Closing as this issue seems dependent on #95.