View source for Widget:LocationSearch

<div class="location__search">
<div>
   <label for="location__name">Name</label>
   <input type="text" id="location__name" placeholder="Name...">
</div>
<div>
<label for="search--input">Country</label>
<div class="search__dropdown">
   <input type="text" class="search__bar" id="search--input" placeholder="Country...">
   <span class="clear__btn" id="clearInput" onclick="clearCountry()">X</span>
   <!--{$countries|escape:''}-->
</div>
</div>
<div>
<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>
</div>
</div>

<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 = "{{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>