Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Improve autocomplete behavior, disable browser autocomplete

Browse Source
This commit is contained in:
Skylar Ittner 2019-10-07 21:19:59 -06:00
parent 5a2a3500bf
commit 47bd443689
4 changed files with 83 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
www/assets/js/autofill.js
View File

@ -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;
}

32
www/assets/js/manage.js
View File

@ -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);
}
});
}

6
www/pages/manage.html
View File

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

23
www/routes.js
View File

@ -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'