Autocomplete Field on Google Web App

[@CodeWithCurt]

Google Apps Script in Video:
function doGet(e) {
return HtmlService.createTemplateFromFile('AutoComplete').evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function AddRecord(firstname, lastname, street, city, state, zip, email) {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var autoCompleteSheet = ss.getSheetByName("FORM DATA");
autoCompleteSheet.appendRow([firstname, lastname, street, city, state, zip, email, new Date()]);

}
function getStates()
{
var ss= SpreadsheetApp.getActiveSpreadsheet();
var statesSheet = ss.getSheetByName("STATES");
var statesRange = statesSheet.getRange("A2:A51");
var statesValues = statesRange.getValues();
return statesValues;
}

[@CodeWithCurt]

AutoComplete Html Code in Video:








$( document ).ready(function() {
getStates();
});
function AddRow()
{
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
var email = document.getElementById("email").value;
if(firstname != '' && lastname != '' && street != '' && city != '' && state != '' && zip != '' && email != '')
{
google.script.run.AddRecord(firstname, lastname, street, city, state, zip, email);

document.getElementById("firstname").value = '';
document.getElementById("lastname").value = '';
document.getElementById("street").value = '';
document.getElementById("city").value = '';
document.getElementById("state").value = '';
document.getElementById("zip").value = '';
document.getElementById("email").value = '';
document.getElementById("display_error").innerHTML = "Record Added";
}
else
{
document.getElementById("display_error").innerHTML = "Please Enter All Information!";
}
}
function getStates()
{
google.script.run.withSuccessHandler(function(ar)
{
console.log(ar);
statesArray = [];
ar.forEach(function(item, index)
{
statesArray.push(item[0]);
});
$("#state").autocomplete({
source: statesArray
});
}).getStates();
}







First Name



Last Name





Street





City



State



Zip





Email

[@CodeWithCurt]

AutoCompleteStyle Html Code in Video:
.ui-autocomplete {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.ui-autocomplete > li > div {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
cursor: pointer;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

[@motatirris]

Hello Thank you very much for this contribution. Can I add something to the code to restrict the response to only one of the options in the dropdown list?

[@karolzinka2384]

mam ten sam problem teraz. powiedz mi, że masz rozwiązanie :)

[@manojrana6723]

Hi please make a video on just fill Unique ID and then name state Address filled automatically from our given sheet

[@karolzinka2384]

you have solution?

[@jayasri-ft8040]

It's very good effort. Really is replaced for drop-down list. Very useful. Thankyou pal.

[@csvpolis1393]

Hi thank you very much! Is it possible to apply this to a google forms text field?

[@karolzinka2384]

Hi thanks for that! :) please give me a solution how i can put in my form just state from list. at the moment i can enter state POLAND and its ok. How can i to limit this?

[@nazrurbustamar7206]

Appreciate for this sharing. Is it possible after we select one option then some other fields also automatically filled? For example if we make the auto complete on "NAME" field, after selecting one name then it fills the rest of the form based on database record, lets say it is a customer database.

[@uni8322]

Thanks for a nice video and code. Is there any way of making the drop down go up? It becomes a problem when the input element is placed at the bottom of the page.

[@chasdeuce5527]

Keep getting bullets in my drop down list.

[@annalee6590]

Is there a way to hide the "terms of service" and how to make the drop down for the States?

[@TECLEMAIS]

Muito bom, como eu faria para plicar essa função em vários inputs?

[@carlosmolina3144]

Gracias!!! desde La Rioja, Argentina!!

[@supawadee_m]

Thank you so much

[@josephmarpaung1110]

Terima kasih.

[@StijnHommes]

That is a website, not a web app.

[@bellarina0810]

Websites are one-way informational feeds, they do not allow viewers to interact or communicate back to the site. Web applications are websites with functionality and interactive elements. Gmail, Facebook, TH-cam, Twitter, etc. are all web apps that are dynamic, and built for user engagement.