No video

Javascript Autocomplete Dropdown - Javascript Tutorial For Beginners

  Рет қаралды 19,496

Sameer Saini

Sameer Saini

2 жыл бұрын

In a high performing user friendly website, we use the autocomplete feature to give the user the ability to search on a list fast, we often tend to use some libraries but in this video we will see how easy it is to build your own autocomplete input box from scratch using HTML, CSS and Javascript, so stay tuned right till the end.
Autocomplete can be a useful feature in websites where the users have a form to fill and there is a dropdown with a huge list to select from.
Scrolling on the list and finding the correct selection can be a painful task, so for user's ease, we should add an autocomplete form or an autocomplete dropdown where the user can autocomplete on the input text box and the filtered results are shown in the dropdown below.
That makes a good user experience too.
We will fetch data using the Fetch API in javascript and will map the results into a variable and we will use this data to populate the list.
Then will will introduce the Autocomplete search functionality such that when user types into the input text box, the user is shown a filtered data of result or an autocompleted data.
💖 Subscribe to show support: bit.ly/2FAgXzS
☕ Buy me a coffee: www.buymeacoffee.com/SameerSaini
#Autocomplete #Javascript #HTML

Пікірлер: 25
@w3g619
@w3g619 Жыл бұрын
This what I've been searching for weeks! Thank you so much!
@cocoyana
@cocoyana 2 жыл бұрын
Appreciate your concise and logical explanation!
@jaimeandrescarcamosepulved2456
@jaimeandrescarcamosepulved2456 Жыл бұрын
It was very helpful. Thank you for your content!
@shubhamdhiman7516
@shubhamdhiman7516 Жыл бұрын
Thankyou for this tutorial. It's really helpful in my project.
@manaraga9463
@manaraga9463 11 ай бұрын
I tried so many times to make this menu but only this video helped
@ramnarasimhan1499
@ramnarasimhan1499 2 жыл бұрын
The video is really well, Sameer. Keep up the good work, and thank you for sharing your knowledge.
@SameerSaini
@SameerSaini 2 жыл бұрын
Glad it helped, Cheers
@Fullstackdev18
@Fullstackdev18 Жыл бұрын
Awesome man! Thanks :)
@markbarrie5373
@markbarrie5373 6 ай бұрын
Thank you for this
@christinakarlhoff1058
@christinakarlhoff1058 2 жыл бұрын
Hello! How would i alter the code to search for a number? I have a json array of specific numbers and i want to use autocomplete to match the number input by the user. I would appreciate your assistance. Thanks!
@mohammedabdulaziz3658
@mohammedabdulaziz3658 2 жыл бұрын
Too clean code sir, awesome 👍 thank you so much
@SameerSaini
@SameerSaini 2 жыл бұрын
Glad you liked it
@mohammedabdulaziz3658
@mohammedabdulaziz3658 2 жыл бұрын
Sir, please a series of javascript & es6 with real-time examples.. I really like it they way you write a code..#inspiration
@NicoHeinrich
@NicoHeinrich 2 жыл бұрын
Box-sizing: Border-box; Makes life easier! ;)
@SameerSaini
@SameerSaini 2 жыл бұрын
Yea, I have started using that from now onwards :) No need to do all those nasty calculations.
@mirror-images
@mirror-images 2 жыл бұрын
Hello! Thank you for the upload, this video is very helpful. I am having some issues with the autocomplete portion. Upon user input, the dropdown menu does not seem to show all the possible results. For example, when I type in "new," I see "New Zealand" and "Papua New Guinea" but not "New Caledonia" in the dropdown. I am not sure how to troubleshoot this error.
@kirankothandan5529
@kirankothandan5529 10 ай бұрын
If you are not able to see then the API itself didn't return new caledonia😢
@matteorodriguez4068
@matteorodriguez4068 2 жыл бұрын
Hello man, Thanks for your videos.... i have a question; how i can to use fetch with a data from a table of SQL Server?
@SameerSaini
@SameerSaini 2 жыл бұрын
You will have to use a backend language to write an API to fetch data from. Some thing like php, java, aspnet etc
@davitkvaratskhelia4033
@davitkvaratskhelia4033 Жыл бұрын
Source code ?
@dahiya24368
@dahiya24368 Жыл бұрын
where to get java file
@witzoar
@witzoar 2 жыл бұрын
hay Sameer it worked like a charm... my array have multiple value such as image, title, quantity, price, etc... how is it possible searching through specific title. function filterData(data, searchText) {return data.title.filter((x) => x.toLowerCase().includes(searchText.toLowerCase()));} here it gives me an error of lower case.
@eberebenny3311
@eberebenny3311 2 жыл бұрын
this is a great video, but the countries displaying cannot be selected, can you please fix this? Thanks
@eberebenny3311
@eberebenny3311 2 жыл бұрын
hey sir please can you also write or reply my comment if no video coming soon? lol i'd really love to know how this is done
@Shubham123
@Shubham123 Жыл бұрын
19:49
Autocomplete input dropdown | HTML, CSS, JS
52:18
Devistry
Рет қаралды 19 М.
Learn JavaScript With These 4 Projects!
1:10:00
Tech With Tim
Рет қаралды 59 М.
Comfortable 🤣 #comedy #funny
00:34
Micky Makeover
Рет қаралды 14 МЛН
How To Create A Search Bar In JavaScript
14:28
Web Dev Simplified
Рет қаралды 404 М.
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,7 МЛН
HTML Dropdown Lists and DataLists
11:28
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 26 М.
Search Bar with suggestions and filter in react for beginners
10:15
React with Masoud
Рет қаралды 86 М.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,5 МЛН
New AI ROBOT with 3 Brains SHOCKED Experts!
9:16
AI Revolution
Рет қаралды 20 М.
How To Create This Unbelievable CSS Scroll Animation
35:26
Web Dev Simplified
Рет қаралды 241 М.