Typeahead.js - display all pre-selected databases

Question

I use typeahead.js (not Bootstrap 2.x alone!) With a local data dataset, there are no other data requested at any time. I try to get all the suggestions made when the input field is focused, and then just filter them by user type.

This question eliminates the same need, but the decision made is useful only if I have some kind of token for searching - in my case I want to show everything, and not just those that have Uni* tokens.

Is it possible to do this with an undocumented / obscure method, or do I need to hack its source?

Answer 1

I wanted to achieve a similar thing, so I looked at the type code and hacked something together, see below:

It is still a bit wrong with the placeholder handler and closes the drop down list when you click, but it gives me a toggle button that I can click, which is a child of my input element, and it retrieves the full list from the data set instead of a small list of sentences .

Html example (I use custom type data bindings for knockout, but you get the idea):

  <div class="col-md-12 input-group tt-dropdown-group"> <input id="category" name="category" type="text" class="form-control" data-bind=" attr: { placeholder: categoryCaption }, typeahead: categories, typeaheadValueKey: 'Name', typeaheadValue: category, typeaheadDestroy: true" /> <span id="category-drop" class="input-group-addon tt-dropdown-icon"> <span class="glyphicon glyphicon-chevron-down"></span> </span> </div> 

Javascript example using jQuery:

  $(".tt-dropdown-group .tt-dropdown-icon").on("click", function() { var $input = $(this).parent(".tt-dropdown-group").find("input.tt-query"); var $toggleBtn = $(this); // these are all expected to be objects so falsey check is fine if (!$input.data() || !$input.data().ttView || !$input.data().ttView.datasets || !$input.data().ttView.dropdownView || !$input.data().ttView.inputView) { return; } var ttView = $input.data().ttView; var toggleAttribute = $toggleBtn.attr("data-toggled"); if (!toggleAttribute || toggleAttribute === "off") { $toggleBtn.attr("data-toggled", "on"); $input.typeahead("setQuery", ""); if ($.isArray(ttView.datasets) && ttView.datasets.length > 0) { // only pulling the first dataset for this hack var fullSuggestionList = []; // renderSuggestions expects an suggestions array not an object $.each(ttView.datasets[0].itemHash, function(i, item) { fullSuggestionList.push(item); }); ttView.dropdownView.renderSuggestions(ttView.datasets[0], fullSuggestionList); ttView.inputView.setHintValue(""); ttView.dropdownView.open(); } } else if (toggleAttribute === "on") { $toggleBtn.attr("data-toggled", "off"); ttView.dropdownView.close(); }