Supreme Directory – Advances Search with additional infos

Hi guys,

I saw this page here and I like the search, because of the additional infos on the right and left of the advanced search form: https://www.arbolife.com/en/directory/

I checked the code with firebug and it looks like this:

<div class="geodir-search">

                <div style="color: #ffffff; position: relative;"><span class="start-here-text">Select a<br>theme here</span></div><div class='gd-search-input-wrapper gd-search-field-cpt'>			<select name="stype" class="search_by_post">
				
					<option data-label="https://www.arbolife.com/en/stores/"
					        value="gd_place" selected="selected">Stores</option>

				
					<option data-label="https://www.arbolife.com/en/restaurants/"
					        value="gd_restaurant" >Restaurants</option>

				
					<option data-label="https://www.arbolife.com/en/vegetable-boxes/"
					        value="gd_vegetable_box" >Vegetable Boxes</option>

				
					<option data-label="https://www.arbolife.com/en/online-shops/"
					        value="gd_online_shop" >Online Shops</option>

							</select>
			</div><div class='gd-search-input-wrapper gd-search-field-search'>	<input class="search_text" name="s"
	       value="Search for" type="text"
	       onblur="if (this.value.trim() == '') {this.value = 'Search for';}"
	       onfocus="if (this.value == 'Search for') {this.value = '';}"
	       onkeydown="javascript: if(event.keyCode == 13) geodir_click_search(this);">
	</div><div class='gd-search-input-wrapper gd-search-field-near' ><div class='gd-append-near-wrapper'>	<input name="snear" class="snear " type="text" value="Near"
	       onblur="if (this.value.trim() == '') {this.value = ('Near' != '' ? 'Near' : 'Near');}"
	       onfocus="if (this.value == 'Near' || this.value =='Near') {this.value = '';}"
	       onkeydown="javascript: if(event.keyCode == 13) geodir_click_search(this);" />
	<span class="near-compass gd-search-near-input" data-dropdown=".gd-near-me-dropdown" ><i class="fa fa-compass" aria-hidden="true"></i></span></div></div>		<button class="geodir_submit_search fa"></button>
<button class="showFilters " onclick="gdShowFilters(this); return false;"><i class="fa fa-cog" aria-hidden="true"></i></button><div style="color: #ffffff; position: relative;"><span class="advanced-search-text">Advanced<br>Search</span></div>            </div>

Could you tell me how I could also add the additional span fields to add those arrows? Right now I am using a “fake category” but when you click search without chosing a different category you get on a empty page.

Thanks,
Atilla