Widget:NewsSearch

<script> function getCheckedBoxes(type) {

 var checkboxes = document.querySelectorAll('input[name="' + type + '"]');
 var checkedCategories = [];
 for (var i = 0; i < checkboxes.length; i++) {
   var checkbox = checkboxes[i];
   if (checkbox.checked) {
     checkedCategories.push(checkbox.value);
   }
 }
 return checkedCategories;
 // Do something with the checkedCategories array

}

function updateTemplate() {

 var parameters = ;
 var categories = getCheckedBoxes('category');
 if ( categories.length ) {
 	parameters += '|categories=' + categories.join(',');
 }
 var games = getCheckedBoxes('game');
 if ( games.length ) {
 	parameters += '|games=' + games.join(',');
 }

 var tag = document.getElementById("tag").value

 if ( tag.length > 0 ) parameters += '|tag=' + tag

 var title = document.getElementById("title").value

 if ( title.length > 0 ) parameters += '|title=' + title
 
 var contentContainer = document.getElementById("news-search-container");
 
 // Use the selected template as a parameter in the parser function
 var parserFunction = "Template:NewsSearch" + 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

mw.log(content)

   let newContent = document.createElement('div')
   newContent.innerHTML = content.querySelector('.mw-parser-output').innerHTML
   newContent = newContent.firstChild

   if ( content.querySelector('.mw-parser-output li') ) {
      contentContainer.replaceWith(newContent)
   } else {
      contentContainer.innerHTML = 'No news found'
   }

}); }

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>

Category:

<input type="text" id="searchCategory" oninput="searchCategories('Category')" placeholder="Search categories">

<label> <input type="checkbox" name="category" value="Transfer Market" checked /> Transfer Market </label> <label> <input type="checkbox" name="category" value="Drama" checked /> Drama </label> <label> <input type="checkbox" name="category" value="Business" checked> Business </label> <label> <input type="checkbox" name="category" value="Companies" checked> Companies </label> <label> <input type="checkbox" name="category" value="Hires" checked> Hires </label> <label> <input type="checkbox" name="category" value="Investments" checked> Investments </label> <label> <input type="checkbox" name="category" value="Mergers and Acquisitions" checked> Mergers and Acquisitions </label> <label> <input type="checkbox" name="category" value="Sponsorship" checked> Sponsorship </label> <label> <input type="checkbox" name="category" value="More" checked> More </label>

Game:

<input type="text" id="searchGame" oninput="searchCategories('Game')" placeholder="Search categories">

<label> <input type="checkbox" name="game" value="Age of Empires"> Age of Empires </label> <label> <input type="checkbox" name="game" value="Apex Legends"> Apex Legends </label> <label> <input type="checkbox" name="game" value="Brawl Stars"> Brawl Stars </label> <label> <input type="checkbox" name="game" value="Call of Duty"> Call of Duty </label> <label> <input type="checkbox" name="game" value="Counter Strike"> Counter Strike </label> <label> <input type="checkbox" name="game" value="Dota 2"> Dota 2 </label> <label> <input type="checkbox" name="game" value="FIFA"> FIFA </label>

             <label>

<input type="checkbox" name="game" value="Fortnite"> Fortnite </label> <label> <input type="checkbox" name="game" value="Hearthstone"> Hearthstone </label> <label> <input type="checkbox" name="game" value="League of Legends"> League of Legends </label> <label> <input type="checkbox" name="game" value="Mobile Legends"> Mobile Legends </label> <label> <input type="checkbox" name="game" value="Overwatch"> Overwatch </label> <label> <input type="checkbox" name="game" value="PUBG"> PUBG </label> <label> <input type="checkbox" name="game" value="PUBG Mobile"> PUBG Mobile </label> <label> <input type="checkbox" name="game" value="Rainbow Six"> Rainbow Six </label> <label> <input type="checkbox" name="game" value="Rocket League"> Rocket League </label> <label> <input type="checkbox" name="game" value="Smash"> Smash </label> <label> <input type="checkbox" name="game" value="Starcraft II"> Starcraft II </label> <label> <input type="checkbox" name="game" value="Valorant"> Valorant </label> <label> <input type="checkbox" name="game" value="Warcraft III"> Warcraft III </label> <label> <input type="checkbox" name="game" value="Wild Rift"> Wild Rift </label>

Tag

      <input type="text" id="tag" value="">

Title

      <input type="text" id="title" value="">

<button style="align-self:center;" onclick="updateTemplate()">Search</button>