Widget:Companies/Search

  <input type="text" id="companies__name" placeholder="Name...">

<script>

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

function updateTemplate() {

 var parameters = ;
 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 + "";
 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

console.log(content)

   if ( content.querySelector('.mw-parser-output #companies-search-container') ) {
      contentContainer.innerHTML = content.querySelector('#companies-search-container').outerHTML;  
   } else {
      contentContainer.innerHTML = 'No locations 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>