Channel Search - Basic Usage Example (Multiple Fields)

index.html

<h3>Form</h3>

{exp:channel_search:form id="Basic Usage Multi"}
<div class="row">
	<div class="nine columns">
		<div class="row">
			<div class="nine columns">
				<label for="q">Keywords</label>
				<input type="text" name="q" id="q" value="{form:q}" />
			</div>
		</div>
		<p><em>Try searching for 'rock', 'Yellowstone', or 'architecture'.</em></p>
		<div class="row">
			<div class="nine columns">
				<label for="type">Type</label>
				<select name="type" id="type" style="width:auto; margin:0;">
					<option value="" {if form:limit == ""}selected="selected"{/if}>All</option>
					<option value="Restaurants" {if form:type == "Restaurants"}selected="selected"{/if}>Restaurants</option>
					<option value="Lodging" {if form:type == "Lodging"}selected="selected"{/if}>Lodging</option>
					<option value="Landmark" {if form:type == "Landmark"}selected="selected"{/if}>Landmark</option>
					<option value="Park" {if form:type == "Park"}selected="selected"{/if}>Park</option>
				</select>
			</div>
		</div>
	</div>
</div>

<div class="row" style="margin-top:20px">
	<div class="four columns">
		<div class="row">
			<div class="four columns">
				<label for="limit">Limit</label>
				<select name="limit" id="limit">
					<option value="1" {if form:limit == "1"}selected="selected"{/if}>1</option>
					<option value="5" {if form:limit == "5"}selected="selected"{/if}>5</option>
					<option value="10" {if form:limit == "10"}selected="selected"{/if}>10</option>
					<option value="20" {if form:limit == "20" || form:limit == ""}selected="selected"{/if}>20</option>
					<option value="all" {if form:limit == "all"}selected="selected"{/if}>All</option>
				</select>
			</div>
			<div class="four columns">
				<label for="sort">Sort</label>
				<select name="sort" id="sort">
					<option value="asc" {if form:sort == "asc"}selected="selected"{/if}>Asc</option>
					<option value="desc" {if form:sort == "desc" || form:sort == ""}selected="selected"{/if}>Desc</option>
				</select>
			</div>
			<div class="four columns">
				<label for="order_by">Order By</label>
				<select name="order_by" id="order_by">
					<option value="entry_date">Date</option>
					<option value="title">Title</option>
				</select>
			</div>
		</div>
	</div>
</div>

<button type="submit" class="button" style="margin-top:20px;">Search</button>

{/exp:channel_search:form}

<hr>

<h3>Results</h3>

{exp:channel_search:results id="Basic Usage Multi"}

{if no_results}
	<p>No locations were found</p>
{/if}

{if is_first_row}
			
	{if prev_page || next_page}
	<div class="pagination right">
		
		{if prev_page_url}
			<a href="{prev_page_url}"><i class="icon-circle-arrow-left"></i> Prev Page</a>
		{/if}
		
		{if next_page_url && prev_page_url}
			| 
		{/if}
 
		{if next_page_url}
			<a href="{next_page_url}">Next Page <i class="icon-circle-arrow-right"></i></a>
		{/if}
		
	</div>
	{/if}
	
	<div class="search-stats">
		<p> Showing page {current_page} of {total_pages} &dash; ({grand_total} Result{if grand_total != 1}s{/if} Found)</p>
	</div>

	<table>
	<thead>
		<tr>
			<th width="25%">Photo</th>
			<th width="35%">Title</th>
			<th>Address</th>
		</th>
	</tr>
	</thead>
{/if}
	 
	<tbody>

		<tr>
			<td>{poi_photo}</td>
			<td><b>{title}</b> <p><em>{poi_keywords}</em></p></td>
			<td><p>{poi_formatted_address}</p> <p><em>{poi_map parse="markers" limit="1"}{markers}{marker:latitude}, {marker:longitude}{/markers}{/poi_map}</em></p></td>
		</tr>

	</tbody>

{if is_last_row}
	</table>

	{if prev_page || next_page}
	<div class="pagination right">
		
		{if prev_page_url}
			<a href="{prev_page_url}"><i class="icon-circle-arrow-left"></i> Prev Page</a>
		{/if}
		
		{if next_page_url && prev_page_url}
			| 
		{/if}
 
		{if next_page_url}
			<a href="{next_page_url}">Next Page <i class="icon-circle-arrow-right"></i></a>
		{/if}
		
	</div>
	{/if}

{/if}

{/exp:channel_search:results}