Single empty templates and sentences for multiple datasets of type

Question

I tried to combine several functions in the typeahead plugin , in particular several datasets + empty + default sentences. So far no luck, hope someone can help

Right now, to make it work, it's a choice between multiple datasets --- OR --- empty + default sentences

Fiddle here

My 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>

MY 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

First, I wrapped the input in a div to easily return to the parent:

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

Secondly, you need to add a special class to the notFound div div. This will need to be applied to all data sets. I chose 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. typeahead (.tt-input)
0 .

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

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

});