typeahead.js - Displaying all Prefetched Datums

Question

I'm using typeahead.js (not the Bootstrap 2.x one!) with a local dataset of datums, there are no other datums being requested at any given point. I'm trying to have all the suggestions rendered when the input field is focused and then simply filter them as the user types.

This question addresses the same need, but the accepted solution is only useful if I have some token to search for - in my case I want to show everything and not just datums that have Uni* tokens.

Is it possible to do this via a undocumented / obscure method or do I have to hack its source?

Answer 1

I wanted to achieve a similar thing, so I took a look at the typeahead code and hacked something together, see the below:

Its still is a bit buggy with handling placeholders and closing the dropdown when you click away, but this gives me a toggle button that I can click that is a sibling to my input element, and it fetches the full list from the dataset instead of a small suggestion list.

Example html (I am using custom typeahead 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>

Example javascript 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();
        }