Web App Materialize CSS AutoComplete with JavaScript - Google Apps Script Web App Tutorial - Part 9

This Web App tutorial will show you how to create autocomplete input box from Google Sheets data using Materialize CSS AutoComplete. As always we'll use JavaScript to handle all the logic.

Support the Channel:

#javascript #AutoComplete #tutorial #MaterializeCSS

[curiouscesar]

This is a great series! I can't wait for the next video.

[jaigod]

Excelente trabajo. aprecio mucho la claridad y seriedad de tu material.

Great tutoriasl. I have learned so much. Congratulations

[manzelzwel]

Hello and Thanks for this Web App tutorials ! I'm having such a great time doing it !

[adammiller]

thank you so much for your effort to create these videos. Helped a lot!

[arturmangabeirasoares]

This is exactly what i needed, thank you so much!

[Sacchidanand]

Can we add log-in page or restrict our Web app to particular users based on thier email addresses?

[arundquist]

Great video series, thanks so much! I'm curious about the difference between initializing the words for the autocomplete using a google.script.run ... versus using <?= ?>. One reason to do what you're suggesting would be the ease of re-initializing the words, but it seems you wouldn't really need to do that for most use cases.

[GreigMcGill]

Probably very late to this party, but I just hit a very odd problem. I had working code based on this, and overnight, it ceased to function. The autocomplete list object was being populated correctly serverside (logs showed {bob=null, fred=null, jane=null} etc. but clientside, I was suddenly retrieving an empty object {}. After a LOT of headscratching, it seems something has changed with the way "null" is handled. Previously this worked:

options[v[0]] = null;

As of today (well, for me anyway, who knows how long it's been happening given server upgrades etc.) I need to use:

options[v[0]] = false;

If this helps even one person avoid the morning I've just had, great! If anyone knows what has changed around the handling of null, or why this suddenly happened, please let me know.

[dustincintron]

I'm very late but this is a great tutorial. I never knew about this capability. Given this is 5 years ago are there updated versions of this? Perhaps that you yourself have demo'd? (I'll be browsing your YouTube, I just wanted to ask first)

[ycsb-gael]

I'm trying to have two autocomplete input depending one on the other. First autocomplete is lastname and the second is firstnames where lastname match. I managed to get the Lastname autocomplete initialized and working but cannot the second aucomplete data dynamicaly updated. Did you implemented something like this ?

[vcojbvk]

Great video. Learned alot from this series. One question: I tried using AutoComplete for the ZipCode but the Estimated Cost doesn't show up. Wonder what went wrong. Thank you very much

[myudhatristianto]

Great video, thank you so much. Do you know how to add dynamic autocomplete in table cell?

[johnsalazar]

I have a question how could I validate the "send button" to go to another web page.


This is the code:
var idKeys = Object.keys(toValidate);

var allValid = true;

idKeys.forEach(function(id){
var isValid = checkIfValid(id, toValidate[id]);


if(!isValid){

allValid = false;

}
});

if(allValid){



addRecord();


}

[pavithrapalani]

By selecting this value may I know how to find the next cell value for the selected option using auto compelete

[dungtranmanh]

Thank you very much but i have question. If i have 4000 row, the autocomplete may be delays for loading data. Do you try with 4000 row and if happen do you have solution for it. Thank again.

[estateironworkoffice]

This web app series is so helpful. Thank you for creating the tutorial video.
I am having trouble with the formatting when using autocomplete on a phone, when the autocomplete populates choices it zooms the screen in so far I cannot see the options. I then have to shrink the text back down to continue. Do you have any ideas on how to fix this issue? Thanks

[nanpipe]

Hey awesome video... I have a question. How do I get the activeIndex when using the Autocomplete option of materialize. I have tried everything but I'm always getting a "-1". I'm able to get the "count" value but not the activeIndex... is there something that I have to call out first or define?

I'm using the basic example so far...

var list =
var insta = M.Autocomplete.init(list, {data : paxListComplete, onAutocomplete : emails });
autoComplete =
var index = autoComplete .activeIndex;

[melih.a]

I can't seem to get a modal to work with Materializecss could you please make a video on this? Is it an issue with only google app scripts? It opens a new page instead of behaving as a modal.

[macporton]

Do you have tutorial on autocomplete using bootstrap?