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

Comments (0)

Show/Hide comments

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment