Improve autocomplete behavior, disable browser autocomplete
This commit is contained in:
parent
5a2a3500bf
commit
47bd443689
@ -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;
|
||||
}
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
@ -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>
|
||||
|
@ -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'
|
||||
|
Loading…
x
Reference in New Issue
Block a user