Basic lookup





<!-- Small -->
<form class="lookup lookup-sm">
  <input type="text" placeholder="Search...">
</form>

<!-- Default -->
<form class="lookup">
  <input type="text" placeholder="Search...">
</form>

<!-- Large -->
<form class="lookup lookup-lg">
  <input type="text" placeholder="Search...">
</form>




<!-- Small -->
<form class="lookup lookup-right lookup-sm">
  <input type="text" placeholder="Search...">
</form>

<!-- Default -->
<form class="lookup lookup-right">
  <input type="text" placeholder="Search...">
</form>

<!-- Large -->
<form class="lookup lookup-right lookup-lg">
  <input type="text" placeholder="Search...">
</form>

Circle lookup





<!-- Small -->
<form class="lookup lookup-circle lookup-sm">
  <input type="text" name="s">
</form>

<!-- Default -->
<form class="lookup lookup-circle">
  <input type="text" name="s">
</form>

<!-- Large -->
<form class="lookup lookup-circle lookup-lg">
  <input type="text" name="s">
</form>




<!-- Small -->
<form class="lookup lookup-circle lookup-right lookup-sm">
  <input type="text" name="s">
</form>

<!-- Default -->
<form class="lookup lookup-circle lookup-right">
  <input type="text" name="s">
</form>

<!-- Large -->
<form class="lookup lookup-circle lookup-right lookup-lg">
  <input type="text" name="s">
</form>

Huge lookup

.lookup-huge applies to .lookup

You might modify your search forms to add more components:

Fullscreen lookup

Include a .lookup-fullscreen markup in your page and toggle it using a button. You should handle search result using Ajax requests.

If you specify a data-url="path/to/search.php" for the lookup, upon each keyup on the input, a POST request will be send to the url with a parameter named s which is value of the search input. The result returned from the request, will insert inside .lookup-results.


<div class="lookup-fullscreen" id="lookup-full" data-url="path/to/search.php">
  <span class="close" data-toggle="lookup" data-target="#lookup-full"><i class="ti-close"></i></span>

  <div class="lookup-form">
    <input type="text" placeholder="Search anything">
  </div>

  <div class="lookup-results">

  </div>
</div>