Widget:Agatha-test

           <input
             type="radio"
             class="radio"
             id="automobiles"
             name="category"
           />
           <label for="automobiles">Automobiles</label>

           <input type="radio" class="radio" id="film" name="category" />
           <label for="film">Film & Animation</label>

           <input type="radio" class="radio" id="science" name="category" />
           <label for="science">Science & Technology</label>

           <input type="radio" class="radio" id="art" name="category" />
           <label for="art">Art</label>

           <input type="radio" class="radio" id="music" name="category" />
           <label for="music">Music</label>

           <input type="radio" class="radio" id="travel" name="category" />
           <label for="travel">Travel & Events</label>

           <input type="radio" class="radio" id="sports" name="category" />
           <label for="sports">Sports</label>

           <input type="radio" class="radio" id="news" name="category" />
           <label for="news">News & Politics</label>

           <input type="radio" class="radio" id="tutorials" name="category" />
           <label for="tutorials">Tutorials</label>

         Select Video Category

         <input type="text" placeholder="Start Typing..." />

<script> const selected = document.querySelector(".selected"); const optionsContainer = document.querySelector(".options-container"); const searchBox = document.querySelector(".search-box input");

const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {

 optionsContainer.classList.toggle("active");

 searchBox.value = "";
 filterList("");

 if (optionsContainer.classList.contains("active")) {
   searchBox.focus();
 }

});

optionsList.forEach(o => {

 o.addEventListener("click", () => {
   selected.innerHTML = o.querySelector("label").innerHTML;
   optionsContainer.classList.remove("active");
 });

});

searchBox.addEventListener("keyup", function(e) {

 filterList(e.target.value);

});

const filterList = searchTerm => {

 searchTerm = searchTerm.toLowerCase();
 optionsList.forEach(option => {
   let label = option.firstElementChild.nextElementSibling.innerText.toLowerCase();
   if (label.indexOf(searchTerm) != -1) {
     option.style.display = "block";
   } else {
     option.style.display = "none";
   }
 });

}; </script>