Тёмный

Javascript Autocomplete Dropdown - Javascript Tutorial For Beginners 

Sameer Saini
Подписаться 28 тыс.
Просмотров 20 тыс.
50% 1

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.buymeacoff...
#Autocomplete #Javascript #HTML

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 25   
@davitkvaratskhelia4033
@davitkvaratskhelia4033 Год назад
Source code ?
@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
@dahiya24368
@dahiya24368 2 года назад
where to get java file
@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.
@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
@markbarrie5373
@markbarrie5373 8 месяцев назад
Thank you for this
@salmanrazakmemon
@salmanrazakmemon 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.
@shubhamdhiman7516
@shubhamdhiman7516 Год назад
Thankyou for this tutorial. It's really helpful in my project.
@cocoyana
@cocoyana 2 года назад
Appreciate your concise and logical explanation!
@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
@manaraga9463
@manaraga9463 Год назад
I tried so many times to make this menu but only this video helped
@w3g619
@w3g619 Год назад
This what I've been searching for weeks! Thank you so much!
@jaimeandrescarcamosepulved2456
It was very helpful. Thank you for your content!
@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!
@Fullstackdev18
@Fullstackdev18 2 года назад
Awesome man! Thanks :)
@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 Год назад
If you are not able to see then the API itself didn't return new caledonia😢
@Shubham123
@Shubham123 Год назад
19:49
Далее
Autocomplete input dropdown | HTML, CSS, JS
52:18
Просмотров 20 тыс.
5 JavaScript Concepts You HAVE TO KNOW
9:38
Просмотров 1,4 млн
Лучше одной, чем с такими
00:54
Просмотров 222 тыс.
Катаю тележки  🛒
08:48
Просмотров 633 тыс.
Please stop using px for font-size.
15:18
Просмотров 171 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,6 млн
Quick Autocomplete App With JS & JSON
19:29
Просмотров 153 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,7 млн
Wordpress vs coding - why devs SHOULD learn Wordpress
11:03
Learn JSON in 10 Minutes
12:00
Просмотров 3,2 млн
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 962 тыс.