多个 Typeahead 数据集的单个空模板和建议模板答案

【问题标题】：Single empty and suggestion templates for multiple Typeahead Datasets多个 Typeahead 数据集的单个空模板和建议模板
【发布时间】：2015-09-14 15:14:33
【问题描述】：

我一直在尝试组合几个函数 in typeahead plugin 特别是多数据集 + 空 + 默认建议。目前还没有运气，希望有人能帮忙

现在，要使其正常工作，可以在多个数据集之间进行选择 --- 或 --- 空 + 默认建议

Fiddle Here

我的 HTML

<div class="form-group has-feedback" id="citydiv">
  <label class="col-sm-4 control-label" for="city">City / Provinces<span style="color:red">*</span></label>
  <div class="col-sm-4" id="multiple-datasets">
  <input id="cities" name="cities" class="typeahead form-control" type="text">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
  </div>
</div>

我的 JavaScript

var city1 = ['a','b','c','d'];
var city2 = ['e','f','g','h'];
var city3 = ['i','j','k','l'];
var city4 = ['m','n','o','p'];


$('#multiple-datasets .typeahead').typeahead({
  highlight: true,
  hint: true,
  minLength: 1,
},
{
  source: substringMatcher(city1),
  templates: {
    header: '<h4>city1</h4>'
  }
},
{
  source: substringMatcher(city2),
  templates: {
    header: '<h4>city2</h4>'
  }
},
{
  source: substringMatcher(city3),
  templates: {
    header: '<h4>city3</h4>'
  }
},
{
  source: substringMatcher(city4),
  templates: {
    header: '<h4>city4</h4>'
  }
});

【问题讨论】：

GitHub上有一个问题：github.com/twitter/typeahead.js/issues/780

标签： twitter-typeahead

【解决方案1】：

首先，我将输入包装在一个 div 中，以便轻松返回父级：

$(element).wrap('<div class="my-typeahead"></div>');

其次，您需要向 notFound 消息 div 添加一个特殊类。这将需要应用于所有数据集。我选择了 tt-none：

templates: {
    notFound: '<div class="tt-suggestion tt-none">There are no results for your search.</div>',
}

接下来，我在 typeahead:render 上添加了一个监听器：

...
.on('typeahead:render', function(e, objs, async, name) {
    var nones = $(element).find('.tt-none');
    var suggestions = $(element).find('.tt-suggestion.tt-selectable').length;

    // Hide all notFound messages
    nones.hide();
    // Only show the first message if there are zero results available
    if(suggestions === 0) {
        nones.first().show();
    }

});
...

【讨论】：

【解决方案2】：

这是我使用 typeahead.js 处理多个数据集所需的解决方案。

1.向一个数据集添加一个空模板

templates: {
    empty: '<div class="empty-message">No results</div>'
}

2。为 typeahead 输入字段 (.tt-input) 添加事件触发 keyup
当有超过 0 条建议时，我们隐藏空消息。

$(document).on('keyup', ".tt-input", function(event) {

    if($(".tt-suggestion").length){
        $(".empty-message").hide();
    }

});

【讨论】：