javascript - typeahead.js - 显示所有预取数据

Question

我正在使用 typeahead.js (不是 Bootstrap 2.x 版本!)具有数据的本地数据集，在任何给定点都没有请求其他数据。我试图在输入字段获得焦点时呈现所有建议，然后在用户类型时简单地过滤它们。

这question满足相同的需求，但只有当我有一些要搜索的标记时，接受的解决方案才有用 - 在我的例子中，我想显示所有内容，而不仅仅是具有 Uni* 标记的数据。

是否可以通过未记录/晦涩的方法来做到这一点，还是我必须破解它的来源？

Answer 1

我想实现类似的事情，所以我看了一下 typeahead 代码并一起破解了一些东西，如下所示:

它在处理占位符和在您单击离开时关闭下拉列表方面仍然存在一些问题，但这为我提供了一个切换按钮，我可以单击该按钮，它是我的输入元素的同级元素，它会从数据集中获取完整列表而不是一个小的建议列表。

示例 html(我正在使用自定义预输入数据绑定(bind)进行敲除，但你明白了):

        <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>

使用 jQuery 的 javascript 示例:

    $(".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();
        }