MediaWiki:MainMenu.js

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

$( document ).ready(function() {
	// Check if we're on the 'User:Donald/MainMenuTest' page
	if (mw.config.get('wgPageName') === 'User:Donald/MainMenuTest') {
    	// Create the search form HTML
    	var searchFormHTML = '<form action="/wiki/index.php" method="get">' +
                         '<input type="hidden" name="title" value="Special:Search">' +
                         '<input type="text" name="search" placeholder="Search the wiki" />' +
                         '<input type="submit" value="Go" />' +
                         '</form>';

    	// Identify the element where you want to add the search form
    	var pageElement = document.getElementById('testaddsearchbar'); // Replace 'someElementID' with the actual ID

    	// Insert the search form HTML into the identified element
    	if (pageElement) {
        	pageElement.innerHTML = searchFormHTML;
    	}
    	
    	var MenuInput = '<input id="job-search-input" type="text" placeholder="Filter Jobs"></input>';
    	
    	var pagejobElement = document.getElementById('testaddjobsearchbar'); // Replace 'someElementID' with the actual ID

    	// Insert the search form HTML into the identified element
    	if (pagejobElement) {
        	pagejobElement.innerHTML = MenuInput;
    	}
    	
    	var searchInput = document.getElementById('job-search-input');

		if(searchInput) {
	        searchInput.addEventListener('input', function() {
	            var searchTerm = this.value.toLowerCase();
	            var jobsList = document.getElementById('jobs-list');
	            var jobs = jobsList.getElementsByClassName('job-item');
	
	            Array.from(jobs).forEach(function(job) {
	                var jobName = job.getAttribute('data-jobname').toLowerCase();
	                if (searchTerm === '' || jobName.includes(searchTerm)) {
	                    job.style.display = ''; // Show all or matching jobs
	                } else {
	                    job.style.display = 'none'; // Hide non-matching jobs
	                }
	            });
	        });
		}
	}
});