Thanks for the tutorial. I made a small change for older browsers - especially for the InternetBrowser (no startsWith()) HTML-File: .. new Data-Attribute JS-File: at searchInp.addEventListener("keyup", ... var searchWord = searchInp.value.toLowerCase(); arr = source.filter(function(data) { var strVal = data.toLowerCase().search(searchWord); var searchPos = searchDiv.getAttribute("data-search"); ... searchDiv = wrapper.querySelector(".search"); if(searchPos == "start") { ... Item starts with searchWord return strVal == 0 ? true : false; } else { ... Item contains searchWord return strVal > -1 ? true : false; } }).map(function(data) { I also set selected LI on top: var liHeight=30; ... heigth of LI-row function addSource(selectedCountry) { options.innerHTML=""; var cnt=0; var sel = false; source.forEach(function(country) { var isSelected=""; if(sel == false) {cnt++}; if(country == selectedCountry) { var isSelected = "selected"; sel = true; } var li = ''+country+''; options.insertAdjacentHTML("beforeend", li); options.scrollTop = (cnt-1)*liHeight; }); } Thanks again and keep going
Hey hi bro, thank you for the chatting App video, quite helpful. I read , understands and practice your code for 4 months. And created an app for my self. And presented to my college as a Bachelor’s project. And I got 8/8 points (100%) mark for the project, thank you soo much again. Maybe someday I’ll repay you back. Love & respect from India
Suggestion ::: How to make a search engine which will pull data from google and shows us the search results... This will be great✌ --> By the way your videos are great❤
Suggestion ::: How to make a search engine which will pull data from google and shows us the search results... This will be great✌ --> By the way your videos are great❤
Nice content as always. Question: do you know how to close the dropdown menu when you click outside of it? That would be the only thing from a regular dropdown that is missing from here. Thanks.
Great tutorial, I had looked and followed others and couldn't get them to work but this one did, thanks for taking the time out to do this for those of us who are new to JavaScript
Great video! Can you add, How to make this select multiple and add all selected values to select button with option to deselect / remove the wrongly selected value from list?
Excellent tutorial, you are a good teacher, maybe you can guide us on how to make it select with the keyboard arrows, that is, move between the options with the up and down arrows and enter to select? greetings from Ecuador
It might not be necessary on other projects, but in this project, it is. Because in the array, all items' first letter is capital. So, if the user entered first letter is small, then it won't match with any items of the array due to case-insensitive. To omit this problem, I converted the user-entered value and array items to lower case while filtering them. Hope you understand!
It's so easy, you can use these formulas to convert temperature into different units: > Fahrenheit to Celsius celsius = (fahrenheit - 32) / 1.8 > Celsius to Fahrenheit fahrenheit = (celsius * 1.8) + 32
Sir in 12:17 when I write the same what you did all I get is $country in all the the list can you tell me why!!(and when I write ${country} it all shows in orange color)please help meeee 😭
In my opinion this is the best channel in youtube , provide us real practice ❤❤❤
Happy to hear that :)
Looks great just one question... How do you save it's value to send it on a submit form ? thank you!
Respect dude, your thumbnails are extremely clean
Thanks for the tutorial.
I made a small change for older browsers - especially for the InternetBrowser (no startsWith())
HTML-File:
.. new Data-Attribute
JS-File: at searchInp.addEventListener("keyup", ...
var searchWord = searchInp.value.toLowerCase();
arr = source.filter(function(data) {
var strVal = data.toLowerCase().search(searchWord);
var searchPos = searchDiv.getAttribute("data-search"); ... searchDiv = wrapper.querySelector(".search");
if(searchPos == "start") { ... Item starts with searchWord
return strVal == 0 ? true : false;
} else { ... Item contains searchWord
return strVal > -1 ? true : false;
}
}).map(function(data) {
I also set selected LI on top:
var liHeight=30; ... heigth of LI-row
function addSource(selectedCountry) {
options.innerHTML="";
var cnt=0; var sel = false;
source.forEach(function(country) {
var isSelected="";
if(sel == false) {cnt++};
if(country == selectedCountry) {
var isSelected = "selected";
sel = true;
}
var li = ''+country+'';
options.insertAdjacentHTML("beforeend", li);
options.scrollTop = (cnt-1)*liHeight;
});
}
Thanks again and keep going
Good Job Man ..... ! Thank you Very Much....All is done Bro...
Very useful for my learning, thanks a lot from Panama.
First comment.... Love from NEPAL 🇳🇵 ✌️
Keep loving
Hey hi bro, thank you for the chatting App video, quite helpful. I read , understands and practice your code for 4 months. And created an app for my self. And presented to my college as a Bachelor’s project. And I got 8/8 points (100%) mark for the project, thank you soo much again. Maybe someday I’ll repay you back.
Love & respect from India
congrats dude. thats awesome
Congratulations Friend....
I really like your channel Coding Nepal...
Are you using a laptop or desktop and what's it's specifications?
I use desktop.... Specs:
Motherboard - MSI B450M Tomahawk Max
CPU - Ryzen 5 3600
GPU - GTX 1650
RAM - 8 GB * 2
Storage - 1TB HDD / 256 SSD
Love from India 😀😀
Keep loving
Plz add voice to your videos it will enhance your video.
Okay, I'll try to do it!
@@CodingNepal ur both channels are great.
Suggestion ::: How to make a search engine which will pull data from google and shows us the search results... This will be great✌
--> By the way your videos are great❤
True
Suggestion ::: How to make a search engine which will pull data from google and shows us the search results... This will be great✌
--> By the way your videos are great❤
You can use google API for that if they provide!
Sir, your work is awesome 😘.
I want to suggest you that you have to make a little bit tutorials on table. ☺️
Ok I will try
@@CodingNepal I can't wait to see this.
tu es juste un bon, merci pour la vidéo vieux !
good lesson for me
From VietNam
parabéns, muito obrigado por compartilhar seus conhecimentos...
Nice content as always. Question: do you know how to close the dropdown menu when you click outside of it? That would be the only thing from a regular dropdown that is missing from here. Thanks.
maybe to late - but
document.addEventListener("click", function(e) {
arr = e.path.filter(function(path) {
if(path.className) {
var retVal = path.className.search("wrapper");
if(retVal > -1) return true;
}
});
if(arr.length==0) {
wrapper.classList.remove("active");
};
});
just awesome thanks bro
Make a shopping cart with JavaScript please bro
Okay, I'll think on it
Awesome 👌....plz make video on multiple select....
Sir Please also make a video on "WORDLE" game that is becomming most popular nowadays.
Agree
I'll think on it!
Great tutorial, I had looked and followed others and couldn't get them to work but this one did, thanks for taking the time out to do this for those of us who are new to JavaScript
Terimakasih atas tutorialnya
Very Nice tutorial,
Can you do some videos on web designing using Angular framework please. I always find your vids easy to understand than from other youtubers
Thnx for tutorial! Very simple and clean!;)
thank u so much very helpful video sir 🥰🥰
At 11:26 the dollar sign doesn’t work for me is there any fix, great video
amazing sir, thank you very much sir
Most welcome
love from bangladesh
Keep loving
Best Tutorial 🎉🎉
Wow, thanks
Great video! Can you add, How to make this select multiple and add all selected values to select button with option to deselect / remove the wrongly selected value from list?
Can I possible using this menu for search a image in my website gallery? Thank you
Excellent tutorial, you are a good teacher, maybe you can guide us on how to make it select with the keyboard arrows, that is, move between the options with the up and down arrows and enter to select?
greetings from Ecuador
Hi, have u got solution for this?
Wow Bangladesh is here i am in Bangladesh 🥰🥰🤩
Happy to hear that
@@CodingNepal what you think about Bangladesh
Thank you, you are the best !!!
You're welcome!
Hi,
Can you make a video about adding sending photos in chat app which you have created?
I would try to create a complete chat app again in nodejs
amazing code😎🤠
Awesome Sir
Thank you
Really nice video...
Thanks a lot
@@CodingNepal Welcome and keep uploading this type of videos..
Thank you sir😊
Can you give them a value?
Add voice to your video ☺️ plz that is good but adding voice to make video better
Thank you!
How about selects that have content that change frequently?
can you do a tutorial on how to insert the selected country to database
Is there a specific reason for using the toLowerCase() method in the search event listener or is it just a matter of preference?
It might not be necessary on other projects, but in this project, it is. Because in the array, all items' first letter is capital. So, if the user entered first letter is small, then it won't match with any items of the array due to case-insensitive. To omit this problem, I converted the user-entered value and array items to lower case while filtering them. Hope you understand!
Hey,. Can u suggest me to where from I should learn JavaScript easily and full?
You can do this without JavaScript, can you make a tutorial on that?
do your videos work in repl it?
Any way to display innerhtml once a country is selected?
bro, how to get the selected value? cause i want to insert the selected value into the database
How do you redirect to a country's page when you click on some country ?
Awesome
Bro can you make ( HTML to XML and XML to HTML converter ), ( image & video size compressor and image extension changer like: png to jpg ) please🙄❤️❤️
Sorry, for now... I've no idea about it.
@@CodingNepal so can you build temperature converter 🙄👍
It's so easy, you can use these formulas to convert temperature into different units:
> Fahrenheit to Celsius
celsius = (fahrenheit - 32) / 1.8
> Celsius to Fahrenheit
fahrenheit = (celsius * 1.8) + 32
@@CodingNepal thanks😅 for this formula it really help me😅
Please do the videos with explanation..
as always, awesome!!
nice video
Thanks
thanks video
Welcome
@@CodingNepal More videos of this type of material please
useful videos
Glad to hear that
Sir how to automatically close the dropdown when anyone clicks outside the dropdown menu, please guide me.
make a video player just like youtube
Okay, I'll think on it
how to use on multi select menu
how to deactive select menu when click not on select menu
But now i have to update code for database..how can i give name because it was an div please help
Sir in 12:17 when I write the same what you did all I get is $country in all the the list can you tell me why!!(and when I write ${country} it all shows in orange color)please help meeee 😭
Make sure you've wrapped this code using back tick ` ` not using single ' ' or double quotes " ".
You can view the codes of this project if you need it www.codingnepalweb.com/custom-select-menu-html-javascript/
best
11:53
You didnt show close on blur. Actually i know but i want to see another solution.
please put more trash music into the videos, its awesome
LOVE this!
❤❤❤great
I am still waiting on your web for source code -_-
It'll be available soon but don't forget to check out my other video source codes - www.codingnepalweb.com
Please ptc website script video create
Image ne claire pas
🌝
For The algo
ff