我正在使用带有基准数据集的typeahead.js(不是 Bootstrap 2.x !local
),在任何给定点都没有请求其他基准。我试图在输入字段聚焦时呈现所有建议,然后在用户类型时简单地过滤它们。
这个问题解决了同样的需求,但接受的解决方案只有在我有一些要搜索的标记时才有用 - 在我的情况下,我想显示所有内容,而不仅仅是具有Uni*
标记的基准。
是否可以通过无证/晦涩的方法来做到这一点,还是我必须破解它的来源?
我正在使用带有基准数据集的typeahead.js(不是 Bootstrap 2.x !local
),在任何给定点都没有请求其他基准。我试图在输入字段聚焦时呈现所有建议,然后在用户类型时简单地过滤它们。
这个问题解决了同样的需求,但接受的解决方案只有在我有一些要搜索的标记时才有用 - 在我的情况下,我想显示所有内容,而不仅仅是具有Uni*
标记的基准。
是否可以通过无证/晦涩的方法来做到这一点,还是我必须破解它的来源?
我想实现类似的东西,所以我看了一下 typeahead 代码并一起破解了一些东西,见下文:
处理占位符并在您单击离开时关闭下拉菜单仍然有点问题,但这给了我一个切换按钮,我可以单击它是我的输入元素的兄弟,它从数据集中获取完整列表而不是小建议清单。
示例 html(我正在使用自定义预输入数据绑定进行淘汰,但您明白了):
<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();
}