Удалите все предложения по умолчанию в typeahead / bloodhound

Question

Я не собираюсь выяснять, как очистить все стандартные предложения в твиттере typeahead / bloodhound, я пробую это с прошлой недели. Я попытался добавить engine.clear (); и шаблоны, как на картинке ниже.

Пример: когда я нажимаю на выпадающее окно ввода с предложением по умолчанию. дизайн предназначен для недавних поисков, и где мы можем очистить все поиски, когда нажмем очистить. Кто-нибудь может мне помочь разобраться в этом.

введите описание изображения здесь

[`

window.onload=function(){
      
	// init Bloodhound
	var countries_suggestions = new Bloodhound({
	    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
	    queryTokenizer: Bloodhound.tokenizers.whitespace,
	    prefetch: {
	        url:'https://raw.githubusercontent.com/twitter/typeahead.js/gh-pages/data/countries.json',
	        transform: function (data) {          // we modify the prefetch response
	            var newData = [];                 // here to match the response format 
	            data.forEach(function (item) {    // of the remote endpoint
	                newData.push({'name': item});
	            });
	            return newData;
	        }
	    },
	    remote: {
	        url: 'https://restcountries.eu/rest/v2/alpha?codes=%QUERY',
	        wildcard: '%QUERY'
	    },
	    identify: function (response) {
	        return response.name;
	    }
	});

	// init Typeahead
	$('#my_search').typeahead(
	{
	    minLength: 0,
	    highlight: true
	},
	{
	    name: 'countries',
	    source: suggestionsWithDefaults,   // custom function is passed as the source
	    display: function(item) {          // display: 'name' will also work
	        return item.name;
	    },
	    limit: 10,
	    templates: {
	        suggestion: function(item) {
	            return '<div>'+ item.name +'</div>';
	        }
	    }
	});

	function suggestionsWithDefaults(q, sync, async) {
	    if (q === '') {
	        sync([
	        	{name:'Nicaragua'},
	        	{name:'Montenegro'},
	        	{name:'Grenada'},
	        	{name:'Czechia'},
	        	{name:'Philippines'},
	        	{name:'South Africa'},
	        	{name:'British Virgin Islands'}
	        ]);
	    } else {   
	        // let bloodhound handle the rest
	        countries_suggestions.search(q, sync, async); 
	    }
	}

    }

input[type=text] {
    background-image: url(https://img.icons8.com/pastel-glyph/2x/search--v2.png);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 98% 50%;
    background-origin: content-box;
    border-radius: 4px;
    background-color: #f0f1f2;
    padding: 12px;
    display: inline-block;
    box-sizing: border-box;
    outline: none;
    width: 319px;
    margin-top: 0px;
}.typeahead, .tt-query, .tt-hint {
	border: none;
    border-radius: 4px;
    font-size: 16px;
    outline: medium none;
    padding: 8px 10px;
    width: 319px;
}
.typeahead {
	background-color: #f0f1f2 !important;
}
.typeahead:focus {
	border: none;
}
.tt-hint {
	color: #f0f1f2 !important;
}
.tt-menu {
	border-radius: 4px;
  	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
  	background-color: #ffffff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 0px;
	padding:20px 0px;
	width: 100%;
	max-height: 385px;
  	overflow-y: auto;
}
.tt-suggestion {
	font-size: 14px;  /* Set suggestion dropdown font size */
	margin: 0px 18px 14px 18px;
	color: #000000;
	padding-bottom: 14px;
	border-bottom: 1px solid #f2f2f2;
}
.tt-suggestion:first-child {
	margin-top: 0px;
}
.tt-suggestion:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}
.tt-suggestion:hover {
	cursor: pointer;
	background-color: #ffffff;
	color: #3f3f3f;
}
.tt-suggestion p {
	margin: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.min.js"></script>
      <div class="d-flex justify-content-center">
      <input type="text" id="my_search" class="typeahead tt-query" name="search" autocomplete="off" placeholder="Enter Country Code"/>
      </div>

`] 2