Widget:LocationSearch

  <label for="location__name">Name</label>
  <input type="text" id="location__name" placeholder="Name...">

<label for="search--input">Country</label>

  <input type="text" class="search__bar" id="search--input" placeholder="Country...">
  X

<label for="places">Type</label> <select id="types" name="types" onchange="updateTemplate()">

 <option value="">Any</option>
 <option value="InternetCafe">Internet Café</option>
 <option value="Arena">Arena</option>
 <option value="Stadium">Stadium</option>
 <option value="Bootcamp">Bootcamp</option>
 <option value="VR">VR</option>
 <option value="ConventionCenter">Convention Center</option>
 <option value="Educational">Educational</option>
 <option value="Studio">Studio</option>
 <option value="Bar">Bar</option>
 <option value="Shop">Shop</option>
 <option value="Mobile">Mobile</option>
 <option value="Hotel">Hotel</option>
 <option value="Studio">Studio</option>

</select>

<script>

 // Get the input and dropdown content elements
 var input = document.getElementById("search--input");
 var dropdownContent = document.getElementById("country--dropdown");

 // Add onclick to set country
 dropdownContent.addEventListener("click", function(e) {
   if ( !e.target.classList.contains('dropdown__item') ) return
   input.value = e.target.textContent
   updateTemplate(e.target.dataset.country)
 });

 // Show the dropdown when the input receives focus
 input.addEventListener("focus", function() {
   dropdownContent.style.display = "flex";
 });

 // Hide the dropdown when the user clicks outside of it
 document.addEventListener("click", function(event) {
   if (!event.target.matches('.search__bar')) {
     dropdownContent.style.display = "none";
   }
 });

 // Filter the dropdown content based on user input
 input.addEventListener("input", function() {
   var filter = input.value.toUpperCase();
   var items = dropdownContent.getElementsByClassName("dropdown__item");

   for (var i = 0; i < items.length; i++) {
     var txtValue = items[i].textContent || items[i].innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
       items[i].style.display = "";
     } else {
       items[i].style.display = "none";
     }
   }
 });
   

function updateTemplate(country) {

 var parameters = ;
 if ( country ) parameters += '|country=' + country
 else {
    let countrySearch = document.getElementById('search--input').value
    if ( countrySearch !==  ) {
       let elements = document.querySelectorAll('.dropdown__item');
       let countries = []
       elements.forEach(el => {
          if ( el.textContent.toLowerCase().includes(countrySearch.toLowerCase()) ) countries.push(el.dataset.country)
       })
       if ( countries.length > 0 ) parameters += '|country=' + countries.join(',')
    }
 }

 let type = document.getElementById("types").value;
 if ( type !==  ) parameters += '|type=' + document.querySelector(`option[value="${type}"]`).textContent

 let name = document.getElementById("location__name").value;
 if ( name !==  ) parameters += '|name=' + name

 var contentContainer = document.getElementById("locations--list");
 
 // Use the selected template as a parameter in the parser function
 var parserFunction = "Template:LocationsLanding/List" + parameters + "";

console.log(parserFunction)

 // Replace the content in the dynamic content container with the parsed template
  $.get(mw.util.wikiScript('api'), { action: 'parse', format: 'json', text: parserFunction }, function(data) {
   var parsedContent = data.parse.text['*'];
   var content = document.createElement('div')
   content.innerHTML = parsedContent

   if ( content.querySelector('.mw-parser-output .location__item') ) {
      contentContainer.innerHTML = content.querySelector('.mw-parser-output').innerHTML;  
   } else {
      contentContainer.innerHTML = 'No locations found'
   }

}); }

  // Name input to run 500ms after last input
  let timeoutId;
  document.getElementById('location__name').addEventListener('input', function() {
     // Clear previous timeout (if any)
     clearTimeout(timeoutId);

     // Set a new timeout for 500ms
     timeoutId = setTimeout(updateTemplate, 500);
   });

function clearCountry() {

  input.value = 
  updateTemplate()

}

function searchCategories(type) {

 var searchInput = document.getElementById('search' + type).value.toLowerCase();

 // Get all the checkbox labels
 var labels = document.querySelectorAll('.scrollable-' + type + ' label');

 // Loop through the labels and hide/show checkboxes based on the search query
 for (var i = 0; i < labels.length; i++) {
   var label = labels[i];
   var labelText = label.textContent.toLowerCase();
   if (labelText.indexOf(searchInput) === -1) {
     label.style.display = 'none';
   } else {
     label.style.display = 'inline-block';
   }
 }

}

</script>