Create A Custom Select Menu with Search Box in HTML CSS & JavaScript

ff

You didnt show close on blur. Actually i know but i want to see another solution.

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

But now i have to update code for database..how can i give name because it was an div please help

LOVE this! <3

❤❤❤great

Can you give them a value?

as always, awesome!!

Add voice to your video ☺️ plz that is good but adding voice to make video better

For The algo

Please do the videos with explanation..

Thnx for tutorial! Very simple and clean!;)

Looks great just one question... How do you save it's value to send it on a submit form ? thank you!

Awesome 👌....plz make video on multiple select....

Thanks for the tutorial.
I made a small change for older browsers - especially for the InternetBrowser (no startsWith())

HTML-File:
<div class="search" data-search="start"> .. 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 = '<li onclick="updateName(this)" class="'+isSelected+'">'+country+'</li>';
options.insertAdjacentHTML("beforeend", li);
options.scrollTop = (cnt-1)*liHeight;
});
}
Thanks again and keep going

Sir how to automatically close the dropdown when anyone clicks outside the dropdown menu, please guide me.

Thank you!

bro, how to get the selected value? cause i want to insert the selected value into the database

thank u so much very helpful video sir 🥰🥰

Any way to display innerhtml once a country is selected?

How about selects that have content that change frequently?

can you do a tutorial on how to insert the selected country to database

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

From VietNam <3 Thankyousomuch <3

Good Job Man ..... ! Thank you Very Much....All is done Bro...

how to use on multi select menu

please put more trash music into the videos, its awesome

amazing sir, thank you very much sir

how to deactive select menu when click not on select menu

Respect dude, your thumbnails are extremely clean

Very useful for my learning, thanks a lot from Panama.

Is there a specific reason for using the toLowerCase() method in the search event listener or is it just a matter of preference?

Please ptc website script video create

do your videos work in repl it?

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

useful videos

Wow Bangladesh is here i am in Bangladesh 🥰🥰🤩

The Nepali Pro Player Is Great

Tq so so much

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?

Best Tutorial 🎉🎉

Sir, your work is awesome 😘.
I want to suggest you that you have to make a little bit tutorials on table. ☺️

amazing code😎🤠

I really like your channel Coding Nepal...

thanks video