How to make searchable Dropdown using Javascript in hindi
दोस्तों आज किस आर्टिकल में मैं आपको बताऊंगा कि आप किस तरीके से HTML CSS और JAVASCRIPT का इस्तेमाल करके (How to make searchable Dropdown using Javascript in hindi) आप searchable Dropdown बना सकते हैं | क्योंकि Select टैग में यह फीचर By Default नहीं होता है | तो किस तरीके से हम इसे कस्टमाइज करेंगे searchable Dropdown बनाने के लिए वह आज के इस आर्टिकल में मैं आपको बताने वाला हूं |
Read Also: create Web App In Appscript in hindi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="select.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="textholder">
<input type="text" id="input" disabled>
</div>
<div class="text-content">
<input type="text" id="search" placeholder="type to search" autocomplete="off" oninput="filterValue()">
<ul id="uldata">
<li>Apple</li>
<li>Grapes</li>
<li>Guava</li>
<li>Litchi</li>
<li>Carrot</li>
<li>Papaya</li>
<li>Orange</li>
</ul>
</div>
</div>
</body>
<script>
function filterValue(){
let userInput = document.getElementById("search").value.toLowerCase()
let dataList= document.querySelectorAll("#uldata li")
dataList.forEach(function(li){
if(li.innerText.toLowerCase().includes(userInput)){
li.style.display=""
}else{
li.style.display="none"
}
})
}
document.querySelectorAll("#uldata li").forEach(function(row){
row.addEventListener("click",function(){
document.getElementById("input").value=row.textContent
})
})
</script>
</html>
0 टिप्पणियाँ
Thanks For Message Me if any issue please feel free to contact