6

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Alix Axel
  • 151,645
  • 95
  • 393
  • 500

1 Answers1

0

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();
        }
Pricey
  • 5,799
  • 12
  • 60
  • 84
  • Thanks this hack seems to work. The problem I have with it is that when you click the first time it opens the "dropdown" but when you click again it selects the first item in the dropdown. Anyway to not have it select anything unless the user clicked on an item from the list? – Guy Oct 20 '13 at 22:49
  • Also the data-toggled isn't set right when you blur the dropdown and just click anywhere on the page (so when you click anywhere and the menu closes you need to click twice for it to open again). Any idea how to fix it? – Guy Oct 20 '13 at 22:59
  • 1
    @Guy I haven't spent more time looking at this yet, as I mentioned `Its still is a bit buggy with handling placeholders and closing the dropdown when you click away`, if I get a chance I will look at improving it. The idea of posting this was to give a good example of where the data can be found inside typeahead and prefetching the full list of datums because that took a lot longer to track down.. not as a completely polished implementation of the dropdown. – Pricey Oct 21 '13 at 10:33
  • whoever downvoted this please say why, as it answers the original poster question but it is up to them if they mark it as an answer.. there is also no other answer and I am pretty sure me delving into the typeahead code for hours doesn't deserve a downvote for no reason when it is information shown here to help, especially if its only due to a buggy data-toggle implementation that is irrelevant to the question. – Pricey Oct 21 '13 at 10:34
  • thanks. I actually managed to improve it a bit by removing all the code relating to the data-toggled attribute. It works quite well now. I have it triggered when the user clicks in the text input, I don't have a chevron icon in my implementation – Guy Oct 21 '13 at 13:40