Moving search block from the original position to the horizontal top menu

[Bertallo]

Hi, is it possible to move the search block to right side of the horizontal top menu? I've seen that on the horizontal top menu configuration page I can activate a search bar but i prefer the one on the top of the page. The results should be something like this:
 

 

[MarionGeorges]

Hello,

I'm also interested to know if there are any easy way to put the block search into the block top menu. 
I'm aware of the simple search bar in the top menu module, but I prefer the ajax menu too.

[Kethaera]

I copied the contents of the file themes/[yourtheme]/modules/blocksearch/blocksearch-top.tpl into themes/[yourtheme]modules/blockcontact/nav.tpl and tweaked the css to make it fit. That moved the search box up next to the sign in button on the default-bootstrap theme. I don't see why it wouldn't work to paste it into themes/[yourtheme]/modules/blocktopmenu/blocktopmenu.tpl if you want it in the same bar as your home button.

[MarionGeorges]

Thanks a lot, 

I indeed have my top search bar in my Block Top menu, but it seem there are some JS conflicts here in line 71 : my menu no longer pull down, and my search bar didn't have ajax anymore.

 

 

 

 

And the same code here :

/* TODO Ids aa blocksearch_type need to be removed*/
var width_ac_results = 	$("#search_query_" + blocksearch_type).parent('form').width();
if (typeof ajaxsearch != 'undefined' && ajaxsearch && typeof blocksearch_type !== 'undefined' && blocksearch_type)
$("#search_query_" + blocksearch_type).autocomplete(
search_url,
{
minChars: 3,
max: 10,
width: (width_ac_results > 0 ? width_ac_results : 500),
selectFirst: false,
scroll: false,
dataType: "json",
formatItem: function(data, i, max, value, term) {
return value;
},
parse: function(data) {
var mytab = new Array();
for (var i = 0; i < data.length; i++)
mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };
return mytab;
},
extraParams: {
ajaxSearch: 1,
id_lang: id_lang
}
}
)
.result(function(event, data, formatted) {
$('#search_query_' + blocksearch_type).val(data.pname);
document.location.href = data.product_link;
});

Edited October 23, 2014 by MarionGeorges (see edit history)

[Kethaera]

I'm sorry, I'm not very good with JS which is one reason why I put mine in the contact nav bar, so there wouldn't be any conflicts. Hopefully someone with more JS knowledge can help you!

[Bertallo]

Hi everybody and thanks for your replies, i'm trying to do what Kethaera told us but i can't see any change on my frontend
I've also deleted the content of the "cache" and "compile" folders (cache/smarty/cache and cache/smarty/compile) but when i reload the page i can't see any change..
Can i see your modified blocktopmenu.tpl MarionGeorges? 

[MarionGeorges]

Yes of course, here's my file :

{if $MENU != ''}
	<!-- Menu -->
	<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
		<div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
		<ul class="sf-menu clearfix menu-content">
			{$MENU}
			{if $MENU_SEARCH}
				<li class="sf-search noBack" style="float:right">
					<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
						<p>
							<input type="hidden" name="controller" value="search" />
							<input type="hidden" value="position" name="orderby"/>
							<input type="hidden" value="desc" name="orderway"/>
							

							<!-- Block search module TOP -->
							<div id="search_block_top" class="col-sm-4 clearfix">
								<form id="searchbox" method="get" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" >
									<input type="hidden" name="controller" value="search" />
									<input type="hidden" name="orderby" value="position" />
									<input type="hidden" name="orderway" value="desc" />
									<input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
									<button type="submit" name="submit_search" class="btn btn-default button-search">
										<span>{l s='Search' mod='blocksearch'}</span>
									</button>
								</form>
							</div>
							<!-- /Block search module TOP -->

						</p>
					</form>
				</li>
			{/if}
		</ul>
	</div>
	<!--/ Menu -->
{/if}