Hot!Ajax

Search Field with JS/CSS

Written by Alen Grakalic

It features plug & play onfocus and onblur behaviors and auto suggestion. Search suggestion terms displayed as a dropdown box below the search field. You can navigate with up and down keys, or your mouse and you can edit your own keywords. All you need is two lines of code, links to JavaScript and CSS files and that would be it.

DEMO

 

download: Searchfield (19.11 kB)

Implementation

• HEAD:

<link href="/searchfield/searchfield.css" rel="stylesheet" type="text/css" 
media="screen" /> 
<script type="text/javascript"   src="/searchfield/searchfield.js"></script> 

• BODY:

<form id="searchform" action="" method="post"> 
<p><input type="text" id="searchfield" 
name="searchfield" value=""   /> 
<button type="submit">Go</button></p> 
</form> 

At the end modify css file to make it blend into your site.

READ MORE

< Prev		Next >