From f0b64affbd5133b451b528b18c1928b7ef8346b2 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Wed, 1 Jul 2020 23:17:07 +0530
Subject: [PATCH 01/15] Added suggestions part

---
 dist/assets/js/suggest.js | 119 ++++++++++++++++++++++++++++++++++++++
 dist/search.html          |   5 ++
 2 files changed, 124 insertions(+)
 create mode 100644 dist/assets/js/suggest.js

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
new file mode 100644
index 00000000..9a9a50a8
--- /dev/null
+++ b/dist/assets/js/suggest.js
@@ -0,0 +1,119 @@
+
+function suggester() {
+    var query = document.getElementById("q").value;
+    // console.log(window.location.href + "?q=" + query + "&polygon_geojson=1");
+    // $.ajax({
+    //     type: "POST",
+    //     url: "../lib/es.py",
+    //     data: { param: query },
+    //     success: callbackFunc,
+    //     error: callbackFunc
+    // });
+
+    var xmlhttp = new XMLHttpRequest();
+    var url = "http://localhost:8000/pref/?q=" + query;
+    console.log(url);
+
+    xmlhttp.onreadystatechange = function () {
+        // if(!(this.responseText === ""))
+        // {
+        //     console.log(this.status, this.responseText);
+        // }
+        if (this.readyState == 4 && this.status == 200) {
+            var myArr = JSON.parse(this.responseText);
+            // var hits = myArr['features'];
+            var hits = myArr['hits'].hits;
+            // console.log(hits, hits.length);
+            var options = '';
+            for (var i = 0; i < hits.length; i++) {
+                res = '';
+                // console.log(hits[i]['properties'].length);
+                // for(var j in hits[i]['properties'])
+                // {
+                //     res += hits[i]['properties'][j];
+                //     if(j != 0 && hits[i]['properties'][j] !== '')
+                //         res += ", ";
+                // }
+
+                // console.log(i, hits[i]._source.name);
+                res = hits[i]._source.name;
+                // if(hits[i]._source.hasOwnProperty('name'))
+                // if(hits[i]._source.hasOwnProperty('city'))
+                //     res +=  ", " + hits[i]._source.city['default'];
+                // if(hits[i]._source.hasOwnProperty('country'))
+                //     res += ", " + hits[i]._source['country']['default'];
+                // if(hits[i]._source.hasOwnProperty('osm_value'))
+                //     res += " (" + hits[i]._source['osm_value'] + ")";
+                // if(res === '')
+                //     res = query;
+                res = hits[i]._source.address;
+                res = res.replace(/\"/g, "'")
+                // console.log(res);
+                // Using photon API
+                // if(hits[i]['properties'].hasOwnProperty('name'))
+                //     res += hits[i]['properties']['name'];
+                // if(hits[i]['properties'].hasOwnProperty('city'))
+                //     res +=  ", " + hits[i]['properties']['city'];
+                // if(hits[i]['properties'].hasOwnProperty('country'))
+                //     res += ", " + hits[i]['properties']['country'];
+                // if(hits[i]['properties'].hasOwnProperty('osm_value'))
+                //     res += " (" + hits[i]['properties']['osm_value'] + ")";
+                // if(res === '')
+                //     res = query;
+                options += '<option value="' + res + '" />';
+                // console.log( hits[i]['properties']['osm_id'] );
+
+            }
+            document.getElementById('suglist').innerHTML = options;
+            console.log(document.getElementById('suglist').innerHTML);
+        }
+    };
+
+
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+
+    function myFunction(arr) {
+        var out = "";
+        var i;
+        for (i = 0; i < arr.length; i++) {
+            out += '<a href="' + arr[i].url + '">' +
+                arr[i].display + '</a><br>';
+        }
+        document.getElementById("content").innerHTML = out;
+    }
+
+    // xhr = createCORSRequest('GET', 'http://127.0.0.1:5001/square/');
+    // console.log(xhr.send());
+    // console.log(createCORSRequest('POST', 'http://127.0.0.1:5001/square/').send());
+    // $.ajax({
+    //     url: 'http://127.0.0.1:5001/generate/',
+    //     data: {'number': query},
+    //     method: 'POST',
+    //     success: callbackFunc
+    // });
+    // $.getJSON('http://localhost:9200/bank/_search', 
+    //     function(data, textStatus, jqXHR) {
+    //         alert(data);
+    //     }
+    // );
+}
+
+function createCORSRequest(method, url) {
+    var xhr = new XMLHttpRequest();
+    if ("withCredentials" in xhr) {
+        // XHR has 'withCredentials' property only if it supports CORS
+        xhr.open(method, url, true);
+    } else if (typeof XDomainRequest != "undefined") { // if IE use XDR
+        xhr = new XDomainRequest();
+        xhr.open(method, url);
+    } else {
+        xhr = null;
+    }
+    return xhr;
+}
+
+function callbackFunc(response) {
+    // do something with the response
+    console.log(response);
+}
\ No newline at end of file
diff --git a/dist/search.html b/dist/search.html
index e323dcc1..a3f92aa6 100644
--- a/dist/search.html
+++ b/dist/search.html
@@ -110,6 +110,7 @@ <h4 class="modal-title">Report a problem</h4>
   <script src="assets/js/Control.MiniMap.min.js"></script>
   <script src="assets/js/handlebars.min.js"></script>
   <script src="assets/js/url-search-params.js"></script>
+  <script src="assets/js/suggest.js"></script>
 
   <script src="config.js"></script>
   <script src="handlebar_helpers.js"></script>
@@ -147,9 +148,13 @@ <h4 class="modal-title">Report a problem</h4>
         <input id="q"
                name="q"
                type="text"
+               oninput="suggester()"
                class="form-control form-control-sm"
                placeholder="Search"
+               autocomplete="off"
+               list="suglist"
                value="{{sQuery}}" />
+               <datalist id="suglist"></datalist>
 
         <div class="form-group search-button-group">
           <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>

From cf692c16d80fad31b51b0b530db4475cbf63cb76 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Thu, 6 Aug 2020 08:50:27 +0200
Subject: [PATCH 02/15] Code cleanup and Url encoding

---
 dist/assets/js/suggest.js | 101 ++++++--------------------------------
 dist/search.html          |   2 +-
 2 files changed, 16 insertions(+), 87 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 9a9a50a8..c08b22d9 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,68 +1,31 @@
 
 function suggester() {
     var query = document.getElementById("q").value;
-    // console.log(window.location.href + "?q=" + query + "&polygon_geojson=1");
-    // $.ajax({
-    //     type: "POST",
-    //     url: "../lib/es.py",
-    //     data: { param: query },
-    //     success: callbackFunc,
-    //     error: callbackFunc
-    // });
 
     var xmlhttp = new XMLHttpRequest();
-    var url = "http://localhost:8000/pref/?q=" + query;
-    console.log(url);
+    var url = encodeURI("https://gsoc2020.nominatim.org:8000/pref/?q=" + query);
+    console.log("trial: " + url);
 
     xmlhttp.onreadystatechange = function () {
-        // if(!(this.responseText === ""))
-        // {
-        //     console.log(this.status, this.responseText);
-        // }
         if (this.readyState == 4 && this.status == 200) {
             var myArr = JSON.parse(this.responseText);
-            // var hits = myArr['features'];
             var hits = myArr['hits'].hits;
-            // console.log(hits, hits.length);
             var options = '';
             for (var i = 0; i < hits.length; i++) {
-                res = '';
-                // console.log(hits[i]['properties'].length);
-                // for(var j in hits[i]['properties'])
-                // {
-                //     res += hits[i]['properties'][j];
-                //     if(j != 0 && hits[i]['properties'][j] !== '')
-                //         res += ", ";
-                // }
-
-                // console.log(i, hits[i]._source.name);
-                res = hits[i]._source.name;
-                // if(hits[i]._source.hasOwnProperty('name'))
-                // if(hits[i]._source.hasOwnProperty('city'))
-                //     res +=  ", " + hits[i]._source.city['default'];
-                // if(hits[i]._source.hasOwnProperty('country'))
-                //     res += ", " + hits[i]._source['country']['default'];
-                // if(hits[i]._source.hasOwnProperty('osm_value'))
-                //     res += " (" + hits[i]._source['osm_value'] + ")";
-                // if(res === '')
-                //     res = query;
-                res = hits[i]._source.address;
-                res = res.replace(/\"/g, "'")
-                // console.log(res);
-                // Using photon API
-                // if(hits[i]['properties'].hasOwnProperty('name'))
-                //     res += hits[i]['properties']['name'];
-                // if(hits[i]['properties'].hasOwnProperty('city'))
-                //     res +=  ", " + hits[i]['properties']['city'];
-                // if(hits[i]['properties'].hasOwnProperty('country'))
-                //     res += ", " + hits[i]['properties']['country'];
-                // if(hits[i]['properties'].hasOwnProperty('osm_value'))
-                //     res += " (" + hits[i]['properties']['osm_value'] + ")";
-                // if(res === '')
-                //     res = query;
+                tags = ['addr', 'addr:en', 'addr:it', 'addr:fr', 'addr:de'];
+                tags.forEach(myFunction);
+
+                function myFunction(value, index, array) {
+                    if(hits[i]._source[value] && hits[i]._source[value].includes(query))
+                    {
+                        console.log(value);
+                        console.log(hits[i]._source[value]);
+                        res = hits[i]._source[value];
+                        options += '<option value="' + res + '" />';
+                    }
+                }
+                res = hits[i]._source.addr;
                 options += '<option value="' + res + '" />';
-                // console.log( hits[i]['properties']['osm_id'] );
-
             }
             document.getElementById('suglist').innerHTML = options;
             console.log(document.getElementById('suglist').innerHTML);
@@ -82,38 +45,4 @@ function suggester() {
         }
         document.getElementById("content").innerHTML = out;
     }
-
-    // xhr = createCORSRequest('GET', 'http://127.0.0.1:5001/square/');
-    // console.log(xhr.send());
-    // console.log(createCORSRequest('POST', 'http://127.0.0.1:5001/square/').send());
-    // $.ajax({
-    //     url: 'http://127.0.0.1:5001/generate/',
-    //     data: {'number': query},
-    //     method: 'POST',
-    //     success: callbackFunc
-    // });
-    // $.getJSON('http://localhost:9200/bank/_search', 
-    //     function(data, textStatus, jqXHR) {
-    //         alert(data);
-    //     }
-    // );
 }
-
-function createCORSRequest(method, url) {
-    var xhr = new XMLHttpRequest();
-    if ("withCredentials" in xhr) {
-        // XHR has 'withCredentials' property only if it supports CORS
-        xhr.open(method, url, true);
-    } else if (typeof XDomainRequest != "undefined") { // if IE use XDR
-        xhr = new XDomainRequest();
-        xhr.open(method, url);
-    } else {
-        xhr = null;
-    }
-    return xhr;
-}
-
-function callbackFunc(response) {
-    // do something with the response
-    console.log(response);
-}
\ No newline at end of file
diff --git a/dist/search.html b/dist/search.html
index a3f92aa6..94ea9c3d 100644
--- a/dist/search.html
+++ b/dist/search.html
@@ -150,7 +150,7 @@ <h4 class="modal-title">Report a problem</h4>
                type="text"
                oninput="suggester()"
                class="form-control form-control-sm"
-               placeholder="Search"
+               placeholder="Search with suggestions"
                autocomplete="off"
                list="suglist"
                value="{{sQuery}}" />

From 23bb669214121e1564c0629e93649f07b50ef1c8 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Thu, 6 Aug 2020 13:21:08 +0200
Subject: [PATCH 03/15] Updated suggestions

---
 dist/assets/js/suggest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index c08b22d9..ad7edf22 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -9,7 +9,7 @@ function suggester() {
     xmlhttp.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
             var myArr = JSON.parse(this.responseText);
-            var hits = myArr['hits'].hits;
+            var hits = myArr['hits'];
             var options = '';
             for (var i = 0; i < hits.length; i++) {
                 tags = ['addr', 'addr:en', 'addr:it', 'addr:fr', 'addr:de'];

From 8c398b10c3874b10b86e8a87e8d77be1ad7c4328 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Thu, 6 Aug 2020 17:25:57 +0200
Subject: [PATCH 04/15] Updated suggestions

---
 dist/assets/js/suggest.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index ad7edf22..788dce51 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -3,7 +3,7 @@ function suggester() {
     var query = document.getElementById("q").value;
 
     var xmlhttp = new XMLHttpRequest();
-    var url = encodeURI("https://gsoc2020.nominatim.org:8000/pref/?q=" + query);
+    var url = encodeURI("http://gsoc2020.nominatim.org:8000/pref/?q=" + query);
     console.log("trial: " + url);
 
     xmlhttp.onreadystatechange = function () {
@@ -21,10 +21,19 @@ function suggester() {
                         console.log(value);
                         console.log(hits[i]._source[value]);
                         res = hits[i]._source[value];
+                        if(hits[i]._source.country_code)
+                            res += ', ' + hits[i]._source.country_code;
+                        if(hits[i]._source.postcode)
+                            res += ', ' + hits[i]._source.postcode;
+
                         options += '<option value="' + res + '" />';
                     }
                 }
                 res = hits[i]._source.addr;
+                if(hits[i]._source.country_code)
+                    res += ', ' + hits[i]._source.country_code;
+                if(hits[i]._source.postcode)
+                    res += ', ' + hits[i]._source.postcode;
                 options += '<option value="' + res + '" />';
             }
             document.getElementById('suglist').innerHTML = options;

From 8da0e588600ca8a2e012126880e71860f54b3e58 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Fri, 7 Aug 2020 08:59:38 +0200
Subject: [PATCH 05/15] Added extended language support

---
 dist/assets/js/suggest.js | 47 ++++++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 788dce51..8ad81b87 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,43 +1,59 @@
-
+k
 function suggester() {
+//     console.log(navigator.languages);
+    languages = ['zh', 'sp', 'en', 'ar', 'fr', 'ru', 'pt', 'de', 'ja', 'ko'];
+//     browser_languages = navigator.languages;
+    lan = navigator.language;
+    lan = lan.substr(0,2);
+//     browser_languages.push(navigator.language.slice(-2));
+    tags = ['addr'];
+    languages.forEach(function(language, index){
+        tags.push('addr:' + language);
+    });
+    console.log(tags);
+//     tags = ['addr', 'addr:en', 'addr:it', 'addr:fr', 'addr:de'];
     var query = document.getElementById("q").value;
 
     var xmlhttp = new XMLHttpRequest();
     var url = encodeURI("http://gsoc2020.nominatim.org:8000/pref/?q=" + query);
     console.log("trial: " + url);
-
     xmlhttp.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
             var myArr = JSON.parse(this.responseText);
             var hits = myArr['hits'];
             var options = '';
             for (var i = 0; i < hits.length; i++) {
-                tags = ['addr', 'addr:en', 'addr:it', 'addr:fr', 'addr:de'];
-                tags.forEach(myFunction);
-
-                function myFunction(value, index, array) {
+                added = false;
+                tags.forEach(function (value, index) {
                     if(hits[i]._source[value] && hits[i]._source[value].includes(query))
                     {
                         console.log(value);
-                        console.log(hits[i]._source[value]);
+//                         console.log(hits[i]._source[value]);
                         res = hits[i]._source[value];
                         if(hits[i]._source.country_code)
                             res += ', ' + hits[i]._source.country_code;
                         if(hits[i]._source.postcode)
                             res += ', ' + hits[i]._source.postcode;
-
+                        if(value.slice(2) != lan)
+                        {
+                            res += '(' + hits[i]._source['addr:'+lan] + ')';
+                        }
                         options += '<option value="' + res + '" />';
+                        added = true;
                     }
+                });
+                if(!added)
+                {
+                    res = hits[i]._source.addr;
+                    if(hits[i]._source.country_code)
+                        res += ', ' + hits[i]._source.country_code;
+                    if(hits[i]._source.postcode)
+                        res += ', ' + hits[i]._source.postcode;
+                    options += '<option value="' + res + '" />';
                 }
-                res = hits[i]._source.addr;
-                if(hits[i]._source.country_code)
-                    res += ', ' + hits[i]._source.country_code;
-                if(hits[i]._source.postcode)
-                    res += ', ' + hits[i]._source.postcode;
-                options += '<option value="' + res + '" />';
             }
             document.getElementById('suglist').innerHTML = options;
-            console.log(document.getElementById('suglist').innerHTML);
+//             console.log(document.getElementById('suglist').innerHTML);
         }
     };
 
@@ -55,3 +71,4 @@ function suggester() {
         document.getElementById("content").innerHTML = out;
     }
 }
+

From b3c68f6bf4c88c4756572a071172c0bf7f289109 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Mon, 17 Aug 2020 11:49:23 +0200
Subject: [PATCH 06/15] Propogated API changes

---
 dist/assets/js/suggest.js | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 8ad81b87..1f31ff3c 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -15,28 +15,27 @@ function suggester() {
     var query = document.getElementById("q").value;
 
     var xmlhttp = new XMLHttpRequest();
-    var url = encodeURI("http://gsoc2020.nominatim.org:8000/pref/?q=" + query);
+    var url = encodeURI("https://gsoc2020.nominatim.org/suggest/autocomplete/?q=" + query);
     console.log("trial: " + url);
     xmlhttp.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
-            var myArr = JSON.parse(this.responseText);
-            var hits = myArr['hits'];
+            var hits = JSON.parse(this.responseText);
+            length =Object.keys(hits).length;
             var options = '';
-            for (var i = 0; i < hits.length; i++) {
+            for (var i = 0; i < length; i++) {
                 added = false;
                 tags.forEach(function (value, index) {
-                    if(hits[i]._source[value] && hits[i]._source[value].includes(query))
+                    if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+lan])
                     {
-                        console.log(value);
 //                         console.log(hits[i]._source[value]);
-                        res = hits[i]._source[value];
-                        if(hits[i]._source.country_code)
-                            res += ', ' + hits[i]._source.country_code;
-                        if(hits[i]._source.postcode)
-                            res += ', ' + hits[i]._source.postcode;
+                        res = hits[i][value];
+                        if(hits[i].country_code)
+                            res += ', ' + hits[i].country_code;
+                        if(hits[i].postcode)
+                            res += ', ' + hits[i].postcode;
                         if(value.slice(2) != lan)
                         {
-                            res += '(' + hits[i]._source['addr:'+lan] + ')';
+                            res += '(' + hits[i]['addr:'+lan] + ')';
                         }
                         options += '<option value="' + res + '" />';
                         added = true;
@@ -44,11 +43,11 @@ function suggester() {
                 });
                 if(!added)
                 {
-                    res = hits[i]._source.addr;
-                    if(hits[i]._source.country_code)
-                        res += ', ' + hits[i]._source.country_code;
-                    if(hits[i]._source.postcode)
-                        res += ', ' + hits[i]._source.postcode;
+                    res = hits[i].addr;
+                    if(hits[i].country_code)
+                        res += ', ' + hits[i].country_code;
+                    if(hits[i].postcode)
+                        res += ', ' + hits[i].postcode;
                     options += '<option value="' + res + '" />';
                 }
             }
@@ -58,6 +57,7 @@ function suggester() {
     };
 
 
+
     xmlhttp.open("GET", url, true);
     xmlhttp.send();
 

From 7ef39c731da49668bc9dc660796e2eef05fa8bf1 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Fri, 28 Aug 2020 14:07:05 +0200
Subject: [PATCH 07/15] Updated suggestions UI

---
 dist/assets/js/suggest.js | 57 +++++++++++++++++++--------------------
 dist/search.html          |  8 +++---
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 1f31ff3c..1e3c3e22 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,43 +1,43 @@
-k
+
 function suggester() {
-//     console.log(navigator.languages);
+    // List of languages to search for
     languages = ['zh', 'sp', 'en', 'ar', 'fr', 'ru', 'pt', 'de', 'ja', 'ko'];
-//     browser_languages = navigator.languages;
+    // Finding the browser language
     lan = navigator.language;
     lan = lan.substr(0,2);
-//     browser_languages.push(navigator.language.slice(-2));
     tags = ['addr'];
     languages.forEach(function(language, index){
         tags.push('addr:' + language);
     });
+    // Tags contain all languages and tags to look for
     console.log(tags);
-//     tags = ['addr', 'addr:en', 'addr:it', 'addr:fr', 'addr:de'];
-    var query = document.getElementById("q").value;
 
+    var query = document.getElementById("q").value;
     var xmlhttp = new XMLHttpRequest();
+    // The API url to get suggestions
     var url = encodeURI("https://gsoc2020.nominatim.org/suggest/autocomplete/?q=" + query);
     console.log("trial: " + url);
     xmlhttp.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
             var hits = JSON.parse(this.responseText);
             length =Object.keys(hits).length;
-            var options = '';
+            var list_items = '';
             for (var i = 0; i < length; i++) {
                 added = false;
                 tags.forEach(function (value, index) {
                     if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+lan])
                     {
-//                         console.log(hits[i]._source[value]);
-                        res = hits[i][value];
+                        res = ''
+                        if(value.slice(2) != lan)
+                        {
+                            res += '(' + hits[i]['addr:'+lan] + ') ';
+                        }
+                        res += hits[i][value];
                         if(hits[i].country_code)
                             res += ', ' + hits[i].country_code;
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
-                        if(value.slice(2) != lan)
-                        {
-                            res += '(' + hits[i]['addr:'+lan] + ')';
-                        }
-                        options += '<option value="' + res + '" />';
+                        list_items += "<li class='list-group-item' onclick='putText(\"" + res + "\")'>" + res + "</li>";
                         added = true;
                     }
                 });
@@ -48,27 +48,26 @@ function suggester() {
                         res += ', ' + hits[i].country_code;
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
-                    options += '<option value="' + res + '" />';
+                    list_items += "<li class='list-group-item' onclick='putText(\"" + res + "\")'>" + res + "</li>";
                 }
             }
-            document.getElementById('suglist').innerHTML = options;
-//             console.log(document.getElementById('suglist').innerHTML);
-        }
-    };
+            document.getElementById('suglist').innerHTML = list_items;
 
+            console.log(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();
-
-    function myFunction(arr) {
-        var out = "";
-        var i;
-        for (i = 0; i < arr.length; i++) {
-            out += '<a href="' + arr[i].url + '">' +
-                arr[i].display + '</a><br>';
-        }
-        document.getElementById("content").innerHTML = out;
-    }
 }
 
+function putText(str)
+{
+	document.getElementById("q").value = str;
+}
diff --git a/dist/search.html b/dist/search.html
index 94ea9c3d..c5d4c82f 100644
--- a/dist/search.html
+++ b/dist/search.html
@@ -145,16 +145,18 @@ <h4 class="modal-title">Report a problem</h4>
   <div class="tab-content p-2">
     <div class="tab-pane {{#unless hStructured}}active{{/unless}}" id="simple" role="tabpanel">
       <form class="form-inline" role="search" accept-charset="UTF-8" action="">
-        <input id="q"
+        <div id="dd" class="dropdown">
+          <input id="q"
                name="q"
                type="text"
                oninput="suggester()"
                class="form-control form-control-sm"
                placeholder="Search with suggestions"
                autocomplete="off"
-               list="suglist"
+               data-toggle="dropdown"
                value="{{sQuery}}" />
-               <datalist id="suglist"></datalist>
+               <ul id="suglist" class="dropdown-menu"></ul>
+        </div>
 
         <div class="form-group search-button-group">
           <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>

From 3ef98fce059896267b60fff5aad7c572796af6d3 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Fri, 28 Aug 2020 17:29:07 +0200
Subject: [PATCH 08/15] Updated UI with CSS

---
 dist/assets/css/suggest.css |  5 +++++
 dist/assets/js/suggest.js   | 19 +++++++++++--------
 dist/search.html            |  1 +
 3 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 dist/assets/css/suggest.css

diff --git a/dist/assets/css/suggest.css b/dist/assets/css/suggest.css
new file mode 100644
index 00000000..cb51bc4b
--- /dev/null
+++ b/dist/assets/css/suggest.css
@@ -0,0 +1,5 @@
+.list-group-item {
+    padding: .25rem 0.25rem !important;
+    font-size: small !important;
+}
+
diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 1e3c3e22..8e31be7b 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -25,36 +25,39 @@ function suggester() {
             for (var i = 0; i < length; i++) {
                 added = false;
                 tags.forEach(function (value, index) {
-                    if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+lan])
+                    if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+lan] && !added)
                     {
                         res = ''
                         if(value.slice(2) != lan)
                         {
                             res += '(' + hits[i]['addr:'+lan] + ') ';
                         }
+                        else
+                            return;
                         res += hits[i][value];
                         if(hits[i].country_code)
                             res += ', ' + hits[i].country_code;
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
-                        list_items += "<li class='list-group-item' onclick='putText(\"" + res + "\")'>" + res + "</li>";
+                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/poi_boundary_administrative.p.20.png'></i></li>";
                         added = true;
                     }
                 });
                 if(!added)
                 {
-                    res = hits[i].addr;
+                    if(hits[i]['addr:'+lan])
+                        res = hits[i]['addr:'+lan];
+                    else
+                        res = hits[i].addr;
                     if(hits[i].country_code)
                         res += ', ' + hits[i].country_code;
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
-                    list_items += "<li class='list-group-item' onclick='putText(\"" + res + "\")'>" + res + "</li>";
+                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/poi_boundary_administrative.p.20.png'></i></li>";
                 }
             }
             document.getElementById('suglist').innerHTML = list_items;
 
-            console.log(document.getElementById('suglist').innerHTML, list_items);
-
             // Making sure the dropdown is expanded
             document.getElementById("dd").classList.add("open");
             document.getElementById("dd").classList.add("show");
@@ -67,7 +70,7 @@ function suggester() {
     xmlhttp.send();
 }
 
-function putText(str)
+function putText(id)
 {
-	document.getElementById("q").value = str;
+	document.getElementById("q").value = document.getElementById(id).innerHTML;
 }
diff --git a/dist/search.html b/dist/search.html
index c5d4c82f..8d028088 100644
--- a/dist/search.html
+++ b/dist/search.html
@@ -14,6 +14,7 @@
   <link href="assets/css/common.css" rel="stylesheet" />
   <link href="assets/css/search.css" rel="stylesheet" type="text/css" />
   <link href="assets/css/details.css" rel="stylesheet" type="text/css" />
+  <link href="assets/css/suggest.css" rel="stylesheet" type="text/css" />
 </head>
 <body id="BODYID">
 

From ba5491a587d3aa44c7986cfbcb30497f614da4e1 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <31247036+krahulreddy@users.noreply.github.com>
Date: Sat, 29 Aug 2020 19:23:54 +0530
Subject: [PATCH 09/15] Improved readability

---
 dist/assets/js/suggest.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 8e31be7b..6284f251 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,10 +1,10 @@
-
+// This function provides suggestions in the form of unordered list.
 function suggester() {
     // List of languages to search for
     languages = ['zh', 'sp', 'en', 'ar', 'fr', 'ru', 'pt', 'de', 'ja', 'ko'];
     // Finding the browser language
-    lan = navigator.language;
-    lan = lan.substr(0,2);
+    browser_lang = navigator.language;
+    browser_lang = browser_lang.substr(0,2);
     tags = ['addr'];
     languages.forEach(function(language, index){
         tags.push('addr:' + language);
@@ -17,20 +17,24 @@ function suggester() {
     // The API url to get suggestions
     var url = encodeURI("https://gsoc2020.nominatim.org/suggest/autocomplete/?q=" + query);
     console.log("trial: " + url);
+    
+    // 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:'+lan] && !added)
                     {
                         res = ''
-                        if(value.slice(2) != lan)
+                        if(value.slice(2) != browser_lang)
                         {
-                            res += '(' + hits[i]['addr:'+lan] + ') ';
+                            res += '(' + hits[i]['addr:'+browser_lang] + ') ';
                         }
                         else
                             return;
@@ -39,23 +43,29 @@ function suggester() {
                             res += ', ' + hits[i].country_code;
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
-                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/poi_boundary_administrative.p.20.png'></i></li>";
+                        icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
+                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/" + icon_path + "'></i></li>";
                         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:'+lan])
-                        res = hits[i]['addr:'+lan];
+                    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;
-                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/poi_boundary_administrative.p.20.png'></i></li>";
+                    icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
+                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/" + icon_path + "'></i></li>";
                 }
             }
+
+            // 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

From b319ee93eb77a4716c46046a2cd22eea9010f24f Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <31247036+krahulreddy@users.noreply.github.com>
Date: Sat, 29 Aug 2020 19:28:07 +0530
Subject: [PATCH 10/15] Update suggest.js

---
 dist/assets/js/suggest.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 6284f251..bfd54629 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -44,8 +44,7 @@ function suggester() {
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
                         icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/" + icon_path + "'></i></li>";
-                        added = true;
+                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='mapicons' src='" + icon_path + "'></div></li>";added = true;
                     }
                 });
                 // This is to handle cases where no returned language text matches straightaway.
@@ -61,7 +60,7 @@ function suggester() {
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
                     icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div id="+i+">" + res + "</div><div class='md-v-line'></div><img class='mapicons' src='/ui/mapicons/" + icon_path + "'></i></li>";
+		    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='mapicons' src='" + icon_path + "'></div></li>";added = true;
                 }
             }
 

From 6e6e86cf8a88a2c2735a53e2b9294106fbf77efc Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Sat, 29 Aug 2020 17:35:18 +0200
Subject: [PATCH 11/15] Updated UI

---
 dist/assets/css/suggest.css | 7 +++++++
 dist/assets/js/suggest.js   | 7 ++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/dist/assets/css/suggest.css b/dist/assets/css/suggest.css
index cb51bc4b..eec6ab23 100644
--- a/dist/assets/css/suggest.css
+++ b/dist/assets/css/suggest.css
@@ -3,3 +3,10 @@
     font-size: small !important;
 }
 
+.fas {
+    height: 100%;
+}
+
+.dropdown-menu {
+    z-index: 2000 !important;
+}
diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index bfd54629..1572af86 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -17,7 +17,7 @@ function suggester() {
     // The API url to get suggestions
     var url = encodeURI("https://gsoc2020.nominatim.org/suggest/autocomplete/?q=" + query);
     console.log("trial: " + url);
-    
+
     // This is executed after the results are fetched
     xmlhttp.onreadystatechange = function () {
         if (this.readyState == 4 && this.status == 200) {
@@ -44,7 +44,7 @@ function suggester() {
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
                         icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='mapicons' src='" + icon_path + "'></div></li>";added = true;
+                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='mapicons/" + icon_path + "'></div></li>";added = true;
                     }
                 });
                 // This is to handle cases where no returned language text matches straightaway.
@@ -60,7 +60,7 @@ function suggester() {
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
                     icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-		    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='mapicons' src='" + icon_path + "'></div></li>";added = true;
+		    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='mapicons/" + icon_path + "'></div></li>";added = true;
                 }
             }
 
@@ -79,6 +79,7 @@ function suggester() {
     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;

From 4f5eb9d44a1bee55ecd53dd3e1b7eb065c61a838 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Sun, 30 Aug 2020 15:29:37 +0200
Subject: [PATCH 12/15] Added icons and config support

---
 dist/assets/js/suggest.js | 21 ++++++++++-----------
 dist/config.example.js    |  3 +++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 1572af86..36779875 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,5 +1,6 @@
 // This function provides suggestions in the form of unordered list.
 function suggester() {
+
     // List of languages to search for
     languages = ['zh', 'sp', 'en', 'ar', 'fr', 'ru', 'pt', 'de', 'ja', 'ko'];
     // Finding the browser language
@@ -9,14 +10,12 @@ function suggester() {
     languages.forEach(function(language, index){
         tags.push('addr:' + language);
     });
-    // Tags contain all languages and tags to look for
-    console.log(tags);
 
     var query = document.getElementById("q").value;
     var xmlhttp = new XMLHttpRequest();
-    // The API url to get suggestions
-    var url = encodeURI("https://gsoc2020.nominatim.org/suggest/autocomplete/?q=" + query);
-    console.log("trial: " + url);
+
+    // 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 () {
@@ -29,7 +28,7 @@ function suggester() {
                 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:'+lan] && !added)
+                    if(hits[i][value] && hits[i][value].includes(query) && hits[i]['addr:'+browser_lang] && !added)
                     {
                         res = ''
                         if(value.slice(2) != browser_lang)
@@ -43,8 +42,8 @@ function suggester() {
                             res += ', ' + hits[i].country_code;
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
-                        icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='mapicons/" + icon_path + "'></div></li>";added = true;
+                        icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
+                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
                     }
                 });
                 // This is to handle cases where no returned language text matches straightaway.
@@ -59,12 +58,12 @@ function suggester() {
                         res += ', ' + hits[i].country_code;
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
-                    icon_path = "poi_boundary_administrative.p.20.png"; // Needs to be calculated and replaced
-		    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='mapicons/" + icon_path + "'></div></li>";added = true;
+                    icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
+                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
                 }
             }
 
-            // We are setting the unordered list's inner HTML as the list_items. 
+            // 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
diff --git a/dist/config.example.js b/dist/config.example.js
index cf4df523..bbd7bba0 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'] = 'https://gsoc2020.nominatim.org/suggest/autocomplete/?q=';
+
 // If the API should return polygons to be displayed on the map
 // Nominatim_Config['Search_AreaPolygons'] = 1;
 // Nominatim_Config['Reverse_Default_Search_Zoom'] = 18;

From 1bd08acb282efb45583a4186a992358950677d68 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Wed, 2 Sep 2020 20:06:47 +0200
Subject: [PATCH 13/15] Removed default suggestions end-point

---
 dist/assets/js/suggest.js | 4 ++++
 dist/config.example.js    | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index 36779875..7692cefb 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,6 +1,10 @@
 // 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
diff --git a/dist/config.example.js b/dist/config.example.js
index bbd7bba0..83c933f0 100644
--- a/dist/config.example.js
+++ b/dist/config.example.js
@@ -11,7 +11,7 @@ var Nominatim_Config = [];
 // Nominatim_Config['Images_Base_Url'] = '/mapicons/';
 
 // Url to provide suggestions
-// Nominatim_Config['Suggestions_Url'] = 'https://gsoc2020.nominatim.org/suggest/autocomplete/?q=';
+// Nominatim_Config['Suggestions_Url'] = '';
 
 // If the API should return polygons to be displayed on the map
 // Nominatim_Config['Search_AreaPolygons'] = 1;

From a3e04a17ce4b44d2b954276bf8ff7e4b7abd5024 Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Sun, 6 Sep 2020 08:05:45 +0200
Subject: [PATCH 14/15] Updated suggestions UI

---
 dist/assets/css/suggest.css |  5 +++++
 dist/assets/js/suggest.js   | 25 +++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/dist/assets/css/suggest.css b/dist/assets/css/suggest.css
index eec6ab23..0123578a 100644
--- a/dist/assets/css/suggest.css
+++ b/dist/assets/css/suggest.css
@@ -10,3 +10,8 @@
 .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
index 7692cefb..d3b1823e 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -46,8 +46,16 @@ function suggester() {
                             res += ', ' + hits[i].country_code;
                         if(hits[i].postcode)
                             res += ', ' + hits[i].postcode;
-                        icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
-                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
+                        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 += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
+                        }
+                        else
+                        {
+                            list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div></div></li>";added = true;
+
+                        }
                     }
                 });
                 // This is to handle cases where no returned language text matches straightaway.
@@ -62,8 +70,17 @@ function suggester() {
                         res += ', ' + hits[i].country_code;
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
-                    icon_path = get_config_value('Images_Base_Url') + getIcon({'category': hits[i].category, 'type': hits[i].type}) + '.p.20.png';
-                    list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
+                    console.log(getIcon({'category': hits[i].category, 'type': hits[i].type}) == "undefined");
+                    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 += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div><img class='fas mr-4 mapicons' src='" + icon_path + "'></div></li>";added = true;
+                    }
+                    else
+                    {
+                        list_items += "<li  class='list-group-item' onclick='putText("+ i +")'><div class='row'><div class='col' id="+i+">" + res + "</div></div></li>";added = true;
+
+                    }
                 }
             }
 

From c5f512abc6fcc997b795678e8a3f74459d2d155f Mon Sep 17 00:00:00 2001
From: K Rahul Reddy <k_rahul_reddy@outlook.com>
Date: Tue, 8 Sep 2020 09:07:54 +0200
Subject: [PATCH 15/15] Added suggestion scrolling

---
 dist/assets/css/suggest.css |  8 ++++++++
 dist/assets/js/suggest.js   | 36 +++++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/dist/assets/css/suggest.css b/dist/assets/css/suggest.css
index 0123578a..f17f9249 100644
--- a/dist/assets/css/suggest.css
+++ b/dist/assets/css/suggest.css
@@ -3,6 +3,14 @@
     font-size: small !important;
 }
 
+.selected {
+    background: #e2e2e2;
+}
+
+.list-group-item:hover {
+    background: #f1f1f1;
+}
+
 .fas {
     height: 100%;
 }
diff --git a/dist/assets/js/suggest.js b/dist/assets/js/suggest.js
index d3b1823e..c6410fa4 100644
--- a/dist/assets/js/suggest.js
+++ b/dist/assets/js/suggest.js
@@ -1,3 +1,38 @@
+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() {
 
@@ -70,7 +105,6 @@ function suggester() {
                         res += ', ' + hits[i].country_code;
                     if(hits[i].postcode)
                         res += ', ' + hits[i].postcode;
-                    console.log(getIcon({'category': hits[i].category, 'type': hits[i].type}) == "undefined");
                     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';