twitter-typeahead - 多个 Typeahead 数据集的单个空模板和建议模板

Question

我一直在尝试结合几个功能 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>'
  }
});

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

});
...