Back to Browse

Easy JavaScript - How to create a simple Autocomplete Library with Vanilla JS (60)

3.2K views
May 1, 2021
24:59

Welcome to the 60th Easy JavaScript tutorial, part of EasyProgramming.net. This is a long tutorial! I show you how to create a very simple Autocomplete Library from scratch so it takes a little while to talk through and walk through it all. This is for learning purposes and shouldn't be used in a production environment. There are plenty of Autocomplete libraries out there that look better and work smoother. This is just to teach you how to create a quick lib. Breaking down into chapters as best as I can. In this video, we'll talk about topics I've already covered in the past. We'll combine these topics into one library that is reusable and easy to read: 1. JavaScript Modules: https://www.easyprogramming.net/javascript/intro_javascript_modules.php 2. Crawl JSON using Recursive Functions: https://www.easyprogramming.net/javascript/recursive_nested_json_function.php 3. Array methods: https://www.easyprogramming.net/javascript/js_array_methods.php 4. Array.forEach() Loops: https://www.easyprogramming.net/javascript/js_array_forEach_method.php Chapters: 0:00 Intro 0:28 Quick Demo 1:57 Visual Studio Code 2:26 The HTML 3:18 Main.js Module 4:20 Start Autocomplete JS 10:05 Create Recursive Crawler 12:59 Test Array Autocomplete 14:22 Test Object Autocomplete 15:23 More Complex Object Test 16:00 Get Remote Data via AJAX 19:08 The Fetch API 20:00 A look at template literals 21:42 Testing Autocomplete with AJAX Data 23:00 Conclusion 24:44 Me not knowing how to end this video For more information on, check out this post here: https://www.easyprogramming.net/javascript/create_simple_autocomplete_lib.php Get the code at https://github.com/naztronaut/sal For more information, please visit https://www.EasyProgramming.net to view my other programming tutorials! Find videos of Raspberry Pi, C++, Excel, jQuery, and JavaScript Tutorials. Have questions? Ask below or on EasyProgramming.net! #EasyJavaScript #JavaScriptTutorial #EasyProgramming #HowToJavaScript ----------- Visit my website: https://www.easyprogramming.net Subscribe on YouTube: https://www.youtube.com/c/nazmusnasir Support me on Patreon: https://www.patreon.com/nazmus Follow me on Twitter: https://twitter.com/Nazteroid Like me on Facebook: https://www.facebook.com/EasyProgrammingNet Check out my GitHub: https://github.com/naztronaut

Download

0 formats

No download links available.

Easy JavaScript - How to create a simple Autocomplete Library with Vanilla JS (60) | NatokHD