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

[@aJayBoulder]

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

[@pipeliner8969]

this series is super good!

[@manzelzwel4595]

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

[@adammiller5886]

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

[@Strikeast]

Great tutorial video

[@ExcelGoogleSheets]

Thank you! Cheers!

[@Erick-wh2fh]

Hi, thank you so much for your tutorial videos. How can I attach two or more images in this web app?

[@dustincintron1682]

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 KZbin, I just wanted to ask first)

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

[@luiginoto1024]

I also encountered the same problem, yesterday morning everything was ok. In the afternoon the autocomplete was no longer functional. For now I have taken advantage of your suggestion and now everything is ok. I don't know what it depends on. Thanks

[@GreigMcGill]

@@luiginoto1024 That's great news, if only because it confirms I'm not going crazy, and didn't waste my time. :-) Glad it helped, and cheers!

[@ExcelGoogleSheets]

Is it possible it was just a temporary issue?

[@GreigMcGill]

@@ExcelGoogleSheets anything is possible, but as of right now, it's still the same. Change false back to null, and the object returned is empty.

[@AlexBoshyTime]

stucked with the same problem changing null to false helped seems like the problem is with returning object, as you said

[@myudhatristianto2774]

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

[@arturmangabeirasoares1735]

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

[@arturmangabeirasoares1735]

I have one question, tho. is it possible to make data validation? the way this is, the autocomplete works, but if someone types a different thing, it can still record the value. how can i make this validation?

[@ExcelGoogleSheets]

It is possible. It's not something that can be explained within a comment though.

[@arturmangabeira9990]

Nice. thanks! would be an awesome part 10 of the series! :)

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

[@ExcelGoogleSheets]

Depends. In this particular case you need the object to initialize the autocomplete box from MaterializeCSS so wouldn't really work.

[@Sacchidanand]

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

[@pqdt42693]

Very very very good. Thanks!

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

[@selyprimagustian_5p6_38]

Hi Sir, can you make a video dependent dropdown menu from this series.....thanks

[@user-vc8oj2bv1k]

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

[@Wallace_cruz]

For those who are in trouble, currently need to change the null to false.

[@mhd.b3491]

Life saver!

[@pavithrapalani583]

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

[@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 = document.getElementById('paxList'); var insta = M.Autocomplete.init(list, {data : paxListComplete, onAutocomplete : emails }); autoComplete = M.Autocomplete.getInstance(list); var index = autoComplete .activeIndex;

[@macporton5953]

Do you have tutorial on autocomplete using bootstrap?

[@wirot125]

Thank you so much.

[@estateironworkoffice269]

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

[@ExcelGoogleSheets]

Try adding meta tags to your htmlService.. There is an example how to do it here kzbin.info/www/bejne/q5mzkKOFZaiMnKs

[@dungtranmanh4145]

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.

[@_CVD]

Hey thanks so much for the great information! This has been running flawlessly in my script for about a year, but since moving my script to Google's V8 engine, the lookup feature does not run. Has anything changed on the scripting language side, that might prevent this from running?

[@ExcelGoogleSheets]

I can't think of any reason that V8 would interfere with this. You need to check your logs and see what's going on.

[@ExcelGoogleSheets]

Watch this for more info about troubleshooting kzbin.info/www/bejne/nJ3bm2CHd5pjsNE

[@_CVD]

@@ExcelGoogleSheets I think I found the culprit! forEach was discontinued in V8, so the step adding "=null" to each item is preventing the options list from being created. Would you be wiling to offer a replacement in a "for" iterator format? I would be very grateful.

[@_CVD]

@@ExcelGoogleSheets In looking for a workaround, I have am able to replicate the object output in the Logger.log() using a map function instead of forEach, but the autopopulate function still does not work. I am out of ideas.. if the same input is going into the HTML front end, and all the other functions, like calendar picker are working, then it must be something with the way V8 is interpreting this object: var options = {} customerNames2D.map(function(v) { return options[v]=null; }); return options; --- Sorry to place this code here, and fill up your comment section, but I hope we can find a solution together, which could help out other people watching this great video too. :)

[@AdamEfrati]

​@@_CVD I'm now facing the same problem, autocomplete does not work even though it's working with the logger.

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

[@alexandrecharest2715]

Hello, thank you for all your tutorials, they are very useful. Do you know if it's possible to do the same thing in google forms?

[@geraldinebrigante4710]

how did it go with it? you got this?

[@wellingtonjesus1340]

Muito bom o vídeo! Algum trabalho relacionado a tag Navbar para menu mobile? Obrigado!

[@johnsalazar7114]

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

[@alejandrobedoyamunera7332]

Hello, How can I display the image according to the search from the spreadsheet?? thanks

[@fhozouri]

Exxxxcelllent

[@eguchiyuuki]

thanks!!

[@blacktower3076]

I have been done with autocomplete according your instruction but it worked some days and don't work any more. So what happen for it please help me to solve it. Thanks.

[@VebyoArson]

When I tried this it took too long for autocomplete to retrieve data from my Google sheet that I couldn't even type in input field for about 5 seconds.. Do you know what's the problem? Is there any method to avoid this?

[@geraldinebrigante4710]

Hello Learn Google spreadsheets - I must say, I've learned a lot from you. and must ask, this function can be used in a simple google form?

[@ExcelGoogleSheets]

No.

[@tazulislam2698]

How to estimate autocomplete? please give link if you have.

[@ConsulthinkProgrammer]

There's someone else facing loading issue with this DOMContenloaded autocomplete with Materialize?

[@ghostman2876]

Why the media queries are not working in app script

[@ExcelGoogleSheets]

developers.google.com/apps-script/reference/html/html-output-meta-tag

[@moh5ki]

Is anyone experiencing issues with this. It used to work fine for a while but since last week it stopped working...

[@ExcelGoogleSheets]

some people mentioned using false instead of null

[@nepsrn2467]

Hello, this functionality has stopped working. Does anyone know the reason and the solution?

[@nepsrn2467]

@greig McGill I made the suggested change, but the autocomplete still doesn't work. Any suggestion? var options = {}; data.forEach (function (v) { options [v [0]] = false; });

[@ExcelGoogleSheets]

options[v[0]] = false;

[@arturbro9697]

Please provide files for this tutorial. I will be very grateful

[@Anzeljaeg]

thankoyu

[@matusalemdamarin4060]

[@LufianCloud]

even if I use "ws.getRange(1, 3)" it only return the first column.

[@ExcelGoogleSheets]

That makes no sense. 🤔

[@ExcelGoogleSheets]

First row you mean?

[@LufianCloud]

@@ExcelGoogleSheets that's why I want to send a report to google about it. Because whatever I do, it only return the first row or column (I'm sorry I really get confused by rows and columns like vertical and horizontal).

[@LufianCloud]

@@ExcelGoogleSheets I honestly need to make this work because this is the part I have to use in the website I'm planning to make.

[@LufianCloud]

@@ExcelGoogleSheets is there a way that I can send my code to you even just the screenshots of it so that you could check whether I did wrong or right?