Basiclookup
<!-- 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>Circlelookup
<!-- 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>Hugelookup
.lookup-hugeapplies to .lookup
You might modify your search forms to add more components:
Fullscreenlookup
Include a .lookup-fullscreenmarkup 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 keyupon the input, a POST request will be send to the urlwith a parameter named swhich 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>