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

Custom Select Menu in HTML CSS & JavaScript | Custom Select Dropdown Menu in HTML CSS & JavaScript

In this video, I have shown you how to create a Custom Select Menu with Search Box in HTML CSS & JavaScript. On this select menu, there are many countries as options and users can select one of them. There is a search box too that is used to search a country quickly. I hope you'll like this custom select dropdown menu.

Download Codes From Here

Music Credit:
Ikson - Anywhere [Official]

Something 'bout July (Instrumental) by RYYZN

[karimnassir]

In my opinion this is the best channel in youtube, provide us real practice ❤❤❤

[alphamx]

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

[emielv]

Respect dude, your thumbnails are extremely clean

[MikePitt-kgxb]

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 =
arr = source.filter(function(data) {
var strVal =
var searchPos = ... searchDiv =
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;
{
var isSelected="";
if(sel == false) {cnt++};
if(country == selectedCountry) {
var isSelected = "selected";
sel = true;
}
var li = '<li onclick="updateName(this)"
options.insertAdjacentHTML("beforeend", li);
options.scrollTop = (cnt-1)*liHeight;
});
}
Thanks again and keep going

[schanthuka]

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

[elieli]

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

[yubiroaster]

First comment.... Love from NEPAL 🇳🇵 ✌️

[shabankhan]

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

[jbh]

I really like your channel Coding Nepal...

[tikka]

Are you using a laptop or desktop and what's it's specifications?

[nitujha]

Plz add voice to your videos it will enhance your video.

[nitujha]

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❤

[AbdulRahman-xljh]

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

[elvinkyungu]

tu es juste un bon, merci pour la vidéo vieux !

[tinhyeumaugi]

From VietNam <3 Thankyousomuch <3

[jogosediversao]

parabéns, muito obrigado por compartilhar seus conhecimentos...

[leoMC]

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.

[omorfaruk]

just awesome thanks bro

Make a shopping cart with JavaScript please bro

[mohsinsayyad]

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

[zeeshanali]

Sir Please also make a video on "WORDLE" game that is becomming most popular nowadays.