diff --git a/dist/assets/css/suggest.css b/dist/assets/css/suggest.css
new file mode 100644
index 00000000..f17f9249
--- /dev/null
+++ b/dist/assets/css/suggest.css
@@ -0,0 +1,25 @@
+.list-group-item {
+ padding: .25rem 0.25rem !important;
+ font-size: small !important;
+}
+
+.selected {
+ background: #e2e2e2;
+}
+
+.list-group-item:hover {
+ background: #f1f1f1;
+}
+
+.fas {
+ height: 100%;
+}
+
+.dropdown-menu {
+ z-index: 2000 !important;
+}
+
+.dropdown-menu {
+ padding-top: 0;
+ padding-bottom: 0;
+}
diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
new file mode 100644
index 00000000..c6410fa4
--- /dev/null
+++ b/dist/assets/js/suggest.js
@@ -0,0 +1,140 @@
+var liSelected;
+
+document.addEventListener("keydown", event => {
+ if(event.keyCode === 40){
+ if(liSelected){
+ liSelected.removeClass('selected');
+ next = liSelected.next();
+ if(next.length > 0){
+ liSelected = next.addClass('selected');
+ }else{
+ liSelected = $('.list-group-item').eq(0).addClass('selected');
+ }
+ }else{
+ liSelected = $('.list-group-item').eq(0).addClass('selected');
+ }
+ }else if(event.keyCode === 38){
+ if(liSelected){
+ liSelected.removeClass('selected');
+ next = liSelected.prev();
+ if(next.length > 0){
+ liSelected = next.addClass('selected');
+ }else{
+ liSelected = $('.list-group-item').last().addClass('selected');
+ }
+ }else{
+ liSelected = $('.list-group-item').last().addClass('selected');
+ }
+ }
+ if(liSelected && (event.keyCode === 40 || event.keyCode === 38)){
+ console.log(liSelected[0].innerText);
+ document.getElementById('q').value = liSelected[0].innerText;
+ }
+
+});
+
+// This function provides suggestions in the form of unordered list.
+function suggester() {
+
+ // If suggestions end-point is not configured, return without any computation
+ if(get_config_value('Suggestions_Url') == "")
+ return;
+
+ // List of languages to search for
+ languages = ['zh', 'sp', 'en', 'ar', 'fr', 'ru', 'pt', 'de', 'ja', 'ko'];
+ // Finding the browser language
+ browser_lang = navigator.language;
+ browser_lang = browser_lang.substr(0,2);
+ tags = ['addr'];
+ languages.forEach(function(language, index){
+ tags.push('addr:' + language);
+ });
+
+ var query = document.getElementById("q").value;
+ var xmlhttp = new XMLHttpRequest();
+
+ // The API url to get suggestions - Update this with your server URL
+ var url = encodeURI(get_config_value('Suggestions_Url') + query);
+
+ // This is executed after the results are fetched
+ xmlhttp.onreadystatechange = function () {
+ if (this.readyState == 4 && this.status == 200) {
+ var hits = JSON.parse(this.responseText);
+ length =Object.keys(hits).length;
+ // list_items string will be used to form the unordered list entries.
+ var list_items = '';
+ for (var i = 0; i < length; i++) {
+ added = false;
+ // This part adds one tag for each of the received results. Addresss in Broweser default language is returned in paranthesis for clarity.
+ tags.forEach(function (value, index) {
+ if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+browser_lang] && !added)
+ {
+ res = ''
+ if(value.slice(2) != browser_lang)
+ {
+ res += '(' + hits[i]['addr:'+browser_lang] + ') ';
+ }
+ else
+ return;
+ res += hits[i][value];
+ if(hits[i].country_code)
+ res += ', ' + hits[i].country_code;
+ if(hits[i].postcode)
+ res += ', ' + hits[i].postcode;
+ if (getIcon({'category': hits[i].category, 'type': hits[i].type}))
+ {
+ icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
+ list_items += "
" + res + "
";added = true;
+ }
+ else
+ {
+ list_items += "
" + res + "
";added = true;
+
+ }
+ }
+ });
+ // This is to handle cases where no returned language text matches straightaway.
+ // Then we return browser default language or default `addr`.
+ if(!added)
+ {
+ if(hits[i]['addr:'+browser_lang])
+ res = hits[i]['addr:'+browser_lang];
+ else
+ res = hits[i].addr;
+ if(hits[i].country_code)
+ res += ', ' + hits[i].country_code;
+ if(hits[i].postcode)
+ res += ', ' + hits[i].postcode;
+ if (getIcon({'category': hits[i].category, 'type': hits[i].type}))
+ {
+ icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
+ list_items += "
" + res + "
";added = true;
+ }
+ else
+ {
+ list_items += "
" + res + "
";added = true;
+
+ }
+ }
+ }
+
+ // We are setting the unordered list's inner HTML as the list_items
+ document.getElementById('suglist').innerHTML = list_items;
+
+ // Making sure the dropdown is expanded
+ document.getElementById("dd").classList.add("open");
+ document.getElementById("dd").classList.add("show");
+ document.getElementById("suglist").classList.add("show");
+ document.getElementById("q").setAttribute("aria-expanded", true);
+ }
+ };
+
+ xmlhttp.open("GET", url, true);
+ xmlhttp.send();
+}
+
+// Utility to put text on the search bar when clicked on a suggestion
+function putText(id)
+{
+ document.getElementById("q").value = document.getElementById(id).innerHTML;
+}
diff --git a/dist/config.example.js b/dist/config.example.js
index cf4df523..83c933f0 100644
--- a/dist/config.example.js
+++ b/dist/config.example.js
@@ -10,6 +10,9 @@ var Nominatim_Config = [];
// Nominatim_Config['Images_Base_Url'] = '/mapicons/';
+// Url to provide suggestions
+// Nominatim_Config['Suggestions_Url'] = '';
+
// If the API should return polygons to be displayed on the map
// Nominatim_Config['Search_AreaPolygons'] = 1;
// Nominatim_Config['Reverse_Default_Search_Zoom'] = 18;
diff --git a/dist/search.html b/dist/search.html
index e323dcc1..8d028088 100644
--- a/dist/search.html
+++ b/dist/search.html
@@ -14,6 +14,7 @@
+
@@ -110,6 +111,7 @@