Wikimedia Developer Support

Cloning the search form and functionality

We want to emphasize the search feature on our Main Page.

On the FamilySearch wiki Main Page I have cloned the regular search form by using the InputBox extension (e.g.) to first create a generic search form on the page; then I replace that node with a deep clone of the original search form by using JavaScript:

    /** Begin search replacement for Main Page */
    if (/Main_Page/.test(document.location.href) && document.getElementById('searchform')) {
        var searchBad = document.getElementById('bodySearchHomePageSearchBox');
        var searchForm = document.getElementById('searchform');
        var dupNode = searchForm.cloneNode(true); = "searchform2";
        var searchInput = document.getElementById('searchInput'); = "large";

The only issue that I’m having is that the event handlers that normally apply to the original form do not work as hoped for. On the original search box, if you start typing ‘United States’, you’ll get the auto-complete suggestions, but if you click or arrow-key down + enter, you’ll be taken to the search results page instead of the highlighted article. In other words, you get the ‘full-text’ search variant instead of the ‘Go’ variant. It’s clear why this is happening:

From mediawiki/skins/Vector/includes/VectorTemplate.php

/* We construct two buttons (for 'go' and 'fulltext' search modes),
* but only one will be visible and actionable at a time (they are
* overlaid on top of each other in CSS).
* * Browsers will use the 'fulltext' one by default (as it's the
*   first in tree-order), which is desirable when they are unable
*   to show search suggestions (either due to being broken or
*   having JavaScript turned off).
* * The mediawiki.searchSuggest module, after doing tests for the
*   broken browsers, removes the 'fulltext' button and handles
*   'fulltext' search itself; this will reveal the 'go' button and
*   cause it to be used.

I’m trying to figure out how I might be able to patch mediawiki.searchSuggest module or otherwise create a perfect clone of the search functionality.

It occurred to me that by simply changing the order of the submit elements, I could get the intended behavior. But, no matter what methods I used, and even if the functions were wrapped in a “document.ready” wrapper, the full form was not populated yet (because the skin or core JavaScript was still executing). So, I resorted to using setTimeout() to ensure that mediawiki.searchSuggest had a chance to complete before I manipulated the form (and rather than play with element order, I just remove the element):

        // explicitly remove the full-text search button for JS enabled browsers
        // jQuery('#mw-searchButton').detach();
        function removebadGuy() {
            var badGuy = document.querySelector( '.mw-fallbackSearchButton' );
            if ( badGuy != null ) { badGuy.remove(); }
        var improvedForm;
        improvedForm = setTimeout( removebadGuy, 1000 );
	/** end search replacement */

Is there any better method of duplicating the search functionality on a page? Is there a reason why #mw-searchButton sometimes is generated in the page after ‘onload’?