Question

我一直在尝试合并多个函数in typeahead plugin，特别是多个数据集+空+默认建议。到目前为止没有运气，希望有人可以帮忙

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

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

});
...

Answer 2

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

<强> 1。将空模板添加到一个数据集

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

<强> 2。为先行输入字段添加事件触发器键盘（.tt-input）
当建议超过0时，我们隐藏空消息。

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

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

});

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

2 个答案: