Improve autocomplete behavior, disable browser autocomplete

www/assets/js/autofill.js

@@ -1,15 +1,20 @@
-/* 
+/*
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
 var autofillDB = {};
+var autofillStreetDB = [];
 
 if (localStorage.getItem("autofill_db") != null) {
     autofillDB = JSON.parse(localStorage.getItem("autofill_db"));
 }
 
+if (localStorage.getItem("autofill_streetdb") != null) {
+    autofillStreetDB = JSON.parse(localStorage.getItem("autofill_streetdb"));
+}
+
 function addressToNumberAndStreet(address) {
     var number = "";
     var street = "";
@@ -50,9 +55,39 @@ function addAutofillEntry(address) {
     }
 
     localStorage.setItem("autofill_db", JSON.stringify(autofillDB));
+
+
+    var found = false;
+    for (var i = 0; i < autofillStreetDB.length; i++) {
+        if (autofillStreetDB[i][0] == street) {
+            autofillStreetDB[i][1]++;
+            found = true;
+            break;
+        }
+    }
+
+    if (!found) {
+        autofillStreetDB.push([street, 1]);
+    }
+
+    localStorage.setItem("autofill_streetdb", JSON.stringify(autofillStreetDB));
 }
 
-function searchAutofill(number) {
+function searchAutofill(q, number) {
+    var byNumber = [];
+    if (typeof number != 'undefined') {
+        byNumber = searchAutofillByNumber(number);
+    }
+
+    var byStreet = [];
+    if (q.length > 0) {
+        byStreet = searchAutofillByStreet(q);
+    }
+
+    return byNumber.concat(byStreet.filter((item) => byNumber.indexOf(item) < 0));
+}
+
+function searchAutofillByNumber(number) {
     if (typeof autofillDB[number] == 'undefined') {
         return [];
     }
@@ -67,5 +102,26 @@ function searchAutofill(number) {
         streets.push(sorted[i][0]);
     }
 
+    return streets;
+}
+
+function searchAutofillByStreet(q) {
+    var streets = [];
+
+    var sortedDB = autofillStreetDB.sort(function (a, b) {
+        return b[1] - a[1];
+    });
+
+    console.log(sortedDB);
+
+    q = q.toLowerCase();
+
+    for (var i = 0; i < sortedDB.length; i++) {
+        console.log(sortedDB[i][0].toLowerCase().indexOf(q));
+        if (sortedDB[i][0].toLowerCase().includes(q)) {
+            streets.push(sortedDB[i][0]);
+        }
+    }
+
     return streets;
 }

www/assets/js/manage.js

@@ -77,34 +77,4 @@ $(".view-main").on("click", "#historylist .history-list-item", function () {
 // Restore user's last entered city/state combo
 if (localStorage.getItem("citystate") != null) {
     $("input[name=citystate]").val(localStorage.getItem("citystate"));
-}
+}
-
-var streetAutocomplete = app.autocomplete.create({
-    inputEl: '#streetInput',
-    openIn: 'dropdown',
-    preloader: false, //enable preloader
-    /* If we set valueProperty to "id" then input value on select will be set according to this property */
-    valueProperty: 'name', //object's "value" property name
-    textProperty: 'name', //object's "text" property name
-    limit: 10, //limit to 10 results
-    typeahead: true,
-    dropdownPlaceholderText: '',
-    source: function (query, render) {
-        var autocomplete = this;
-
-        var streets = searchAutofill($("input[name=number]").val());
-
-        if (query.length === 0) {
-            render(streets);
-            return;
-        }
-
-        var results = [];
-        for (var i = 0; i < streets.length; i++) {
-            if (streets[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
-                results.push(streets[i]);
-            }
-        }
-        render(results);
-    }
-});

www/pages/manage.html

@@ -41,7 +41,7 @@
                                 <div class="item-inner">
                                     <div class="item-title item-label">Address Number</div>
                                     <div class="item-input-wrap">
-                                        <input type="number" name="number" placeholder="1234">
+                                        <input type="number" name="number" placeholder="1234" autocomplete="off" autocorrect="off" autocapitalize="off">
                                         <span class="input-clear-button"></span>
                                     </div>
                                 </div>
@@ -50,7 +50,7 @@
                                 <div class="item-inner">
                                     <div class="item-title item-label">Street</div>
                                     <div class="item-input-wrap">
-                                        <input type="text" name="street" id="streetInput" placeholder="Road Drive">
+                                        <input type="text" name="street" id="streetInput" placeholder="Road Drive" autocomplete="off" autocorrect="off">
                                         <span class="input-clear-button"></span>
                                     </div>
                                 </div>
@@ -59,7 +59,7 @@
                                 <div class="item-inner">
                                     <div class="item-title item-label">City, State, ZIP</div>
                                     <div class="item-input-wrap">
-                                        <input type="text" name="citystate" placeholder="City, ST, 12345" value="">
+                                        <input type="text" name="citystate" placeholder="City, ST, 12345" value="" autocomplete="off" autocorrect="off">
                                     </div>
                                 </div>
                             </li>

www/routes.js

@@ -28,7 +28,26 @@ var routes = [
     {
         path: '/manage',
         url: './pages/manage.html',
-        name: 'manage'
+        name: 'manage',
+        on: {
+            pageAfterIn: function () {
+                app.autocomplete.create({
+                    inputEl: '#streetInput',
+                    openIn: 'dropdown',
+                    /* If we set valueProperty to "id" then input value on select will be set according to this property */
+                    valueProperty: 'name', //object's "value" property name
+                    textProperty: 'name', //object's "text" property name
+                    limit: 10, //limit to 10 results
+                    typeahead: true,
+                    dropdownPlaceholderText: '',
+                    source: function (query, render) {
+                        var streets = searchAutofill(query, $("input[name=number]").val());
+
+                        render(streets);
+                    }
+                });
+            }
+        }
     },
     {
         path: '/list',
@@ -64,7 +83,7 @@ var routes = [
             }
         }
     },
-        {
+    {
         path: '/credits',
         url: './pages/credits.html',
         name: 'credits'