Widget:Companies/Search

  <label style="display: block;" for="location__name">Name</label>
  <input style="height: 30px; " type="text" id="companies__name" placeholder="Name...">

 <label style="display: block;" for="places">Type</label>
 <select style="height: 30px; " id="types" name="types" onchange="updateTemplate()">
  <option value="">Any</option>
  <option value="Organization">Gaming Organization</option>
  <option value="Locations">Locations</option>
  <option value="Sponsor">Sponsor</option>
  <option value="Organizer">Organizer</option>
  <option value="Other">Other</option>
 </select>

<script>

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

function updateTemplate() {

 var parameters = ;

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

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

 var contentContainer = document.getElementById("companies--list");
 
 // Use the selected template as a parameter in the parser function
 var parserFunction = "Template:Companies/Search" + parameters + "";
 
 // 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 #companies-search-container') ) {
      contentContainer.innerHTML = content.querySelector('#companies-search-container').outerHTML;  
   } else {
      contentContainer.innerHTML = 'No companies found'
   }

}); }

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

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

</script>