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

Question

我一直在尝试组合多个功能in typeahead plugin特别是多个数据集+空白+默认建议。至今没有运气，希望有人能够帮助

眼下，使其工作，这是多重数据集--- OR ---之间进行选择空+默认建议

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

首先，我包裹inpu t在一个div很容易回到父：

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

其次，你将需要添加一个特殊的类到notFound消息div。这将需要应用于所有数据集。我选择了TT-无：

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

接下来，我添加了一个监听器的预输入：渲染：

... 
.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.添加事件触发KEYUP的预输入的输入字段（.TT输入）
当存在大于0的建议，我们隐藏了空信息。

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

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

});