---
layout: container
title: Demos - Search
recline-deps: true
root: ../../
---

<style type="text/css">
.info {
  margin-bottom: 10px;
}

/***************** Search Section ****************/
.record {
  border-bottom: #eee 1px solid;
  padding: 5px;
}

.controls .query-here {
  width: 500px;
  margin: auto;
}

.controls .query-here .text-query input {
  width: 400px;
  /* fix offset bug ...*/
  margin-left: -4px;
}

.pager-here {
  width: 200px;
  margin: auto;
}

.recline-pager {
  float: left;
  margin: auto;
  display: block;
  margin-left: 20px;
}

.recline-pager .pagination input {
  width: 30px;
  height: 18px;
  padding: 2px 4px;
  margin: 0;
  margin-top: -4px;
}

.recline-pager .pagination a {
  line-height: 26px;
  padding: 0 6px;
}

.body {
  clear: both;
}

.results {
  margin-right: 290px;
  border-right: #eee 1px solid;
  padding-right: 20px;
}

.sidebar {
  height: 100%;
  width: 270px;
  float: right;
  padding-left: 10px;
}

ul.facet-items {
  list-style-type: none;
  margin-left: 0;
}
</style>

<div class="page-header">
  <h1>Recline Search Demo</h1>
</div>

<div class="info">
  <p>This demo shows how Recline can be used to build a search app. It includes faceting as well as search. You can find the <a href="app.js">source javascript here</a> &ndash; please feel free to reuse!</p>
  <p>The default version uses some local example data but you can also connect directly to any other backend supported by Recline, in particular SOLR or ElasticSearch. For example, here's an <a href="?backend=solr&amp;url=http://openspending.org/api/search">example of this app running</a> off the OpenSpending SOLR-style search API.</p>
</div>

<hr />

<div class="search-here"></div>

<div style="clear: both;"></div>

<script type="text/javascript" src="app.js"></script>