DNN Search Box to Page with Search Results Module

Jeremy Silva

10 years ago

We recently started work on a DNN skin, where we needed a custom search input box to submit to a page with a search results module installed on it. The input box could not be wrapped in a form layer, since Asp.net serves the entire page in a form.

Our solution, while requiring javascript to be enabled, fit our needs quite nicely.

We started with our HTML input buttons and code that were styled via CSS. (Apologies on the Pirate sounding variables.)

       <input type="button" class="search_icon" id='me_search_button' name="" value="">
       <input type="text" class="search_field"  id='me_search_field' name="" value="" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">

Then in our jQuery load event, we trapped both the button click and keypress event of the search text field. The key-press event trap was so we can detect the enter key and submit the form.

//....
$(window).load(function(){
 
if($('#me_search_field').length !=0){
	$('#me_search_field').keypress(function(e) {
		if(e.which == 13) {
			runMeSearch();
		}
	});
 
	$( "#me_search_button" ).click(function() {
		runMeSearch();
	});
}
 
function runMeSearch(){
		query=encodeURI($('#me_search_field').val());
	    window.location.href ='/meSearchResults?search='+query;
 
}
 
//.....

//….
$(window).load(function(){
if($(‘#me_search_field’).length !=0){
$(‘#me_search_field’).keypress(function(e) {
if(e.which == 13) {
runMeSearch();
}
});
$( “#me_search_button” ).click(function() {
runMeSearch();
});
}
function runMeSearch(){
query=encodeURI($(‘#me_search_field’).val());
window.location.href =’/meSearchResults?search=’+query;
}
//…..

This allows us our custom search form and a page of search results we can style via a custom Skin.