Properties are search either by:

  1. date, using drop down calendars
  2. number of guests
  3. search options
Search menu with a search option Bedrooms.

Search dates

The Search dates block is often the starting point for most of the users looking for availabilities for their stay time, making it one of the most important blocks in the website.

Search dates with dates in the input fields.

The blocks is a form:

<div id="search_dates" class="search_block none">
	<h3><span id="search_dates_name"></span></h3>
	<form action="#" onsubmit="return false;">
		<fieldset class="odd first e-1">
		<legend><span>Check-in</span></legend>
		<input id="search_date_in" type="text" 
		readonly="readonly" />
		</fieldset>
		<fieldset class="even last e-2">
		<legend><span>Check-out</span></legend>
		<input id="search_date_out" type="text" 
		readonly="readonly" />
		</fieldset>
		<div id="search_dates_stay"></div>
		<div id="search_dates_remove"><a href="#" onclick="return 
		false;"><span>reset</span></a></div>
	</form>
</div>

The <legend> “Check-in” and “Check-out” are followed by a <input>. search_dates_stay gives the number of nights for the stay and the <a> search_dates_removes resets to the original state without dates.

Search guests

Search guests has one adult selected by default:

Number of guests with one adult selected.

The label is in a <legend> and the number of guests in a <select>:

<div id="search_guests" class="search_block none">
	<h3><span id="search_guests_name"></span></h3>
	<form action="#" onsubmit="return false;">
		<fieldset class="odd first e-1">
		<legend><span>Adults</span></legend>
		<select id="search_guests_adults"></select>
		</fieldset>
		<fieldset class="even middle e-2">
		<legend><span>Children 4-13 yrs</span></legend>
		<select id="search_guests_children"></select>
		</fieldset>
		<fieldset class="odd last e-3">
		<legend><span>Babies 0-3 yrs</span></legend>
		<select id="search_guests_babies"></select>
		</fieldset>
	</form>
</div>

Search options

Search options are setup in Kigo:

Search option by number of bedrooms added to the search engine.

Search options are in a <ul>:

<div id="search_options" class="search_block">
	<div class="search_options_block e-1 odd first">
		<h3><span>Bedrooms</span></h3>
		<ul id="search_category_466">
			<li id="search_category_466-1" class="e-1 odd 
			first"><a href="#" optid="2445" title="1 bedroom">1 bedroom <span>(1)</
			span></a></li>
		</ul>
	</div>
</div>

Any number of search options can be added:

Search options with Bedrooms and Length of stay.

Search options are dynamic. With “3 bedrooms” selected only “Short term rentals” are available:

Search options with “3 bedrooms” selected.