How can I change the layout of the Advanced Search Web Part in Visual Studio

Question

I’ve had a request to change the layout of the Advanced Search Web Part. They would like the search boxes e.g. “Any of these words”, “Any of these words” etc to appear below the metadata property search boxes, instead of above as it is in the picture below. Does anyone know how I would go about this?

Answer 1

You could do this using JavaScript/JQuery.

Place the code below onto your page inside a Content Editor Web Part.

When the page has loaded, the script finds the labels of the 'Any' and 'All' input fields, selects the closest parent row and clones it above the submit/search button - removing the original rows in the process.

$(document).ready(function() {
    $(".ms-advsrchbutton").closest('tr').before($('.ms-advsearch-header:contains("and/or narrow your search")').closest('tr').remove().clone()).html();
    $(".ms-advsrchbutton").closest('tr').before($('label:contains("All of these words")').closest('tr').remove().clone()).html();
    $(".ms-advsrchbutton").closest('tr').before($('label:contains("Any of these words")').closest('tr').remove().clone()).html();
});