posted on:January 7, 2008
Style Your Websites Search Field with JSCSS
SearchField features 3 states for search input field based on user’s actions. We have inactive state, on click state (on focus to be exact) and inactive with user inputted text. You’ve seen these features on many sites but the difference here is that all you need to do is provide id to your search field, script takes it from there.
Additional feature, that can be turned on and off, is a 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. Again, there is a difference between this and other suggestion or autocomplete scripts. With SearchField you don’t have to worry about additional markup or id’s for dropdown list, it is generated automatically.
Download the script, extract the files and place the folder named "searchfield" in the root of your site. Add these two lines of code inside your head tag.
<link href="/searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
Now, all you need inside the markup is a search input field with exact id as named in .js file. Default id is "searchfield" but you can use anything.
Important thing is the parent element of the search field. I suggest using <p> tag as a parrent element. Here’s how original form looks like, so you can use something similar.
<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="" />
At the end modify css file to make it blend into your site.
There are 2 main files, searchfield.js file and searchfield.css. Inside the .js file you can edit 4 parameters and get the results you want. The appearance of your field and dropdown suggestion box is modified via .css file. The class names are commented so you’ll find your way around it pretty well.
Inside the searchfield.js we have 4 parameters: id, defaultText, suggestion, suggestionText.
First one represents id of the search field you want to add this script to. You can use your own id just make sure that it matches the search field in your html file. defaultText is a text that your search field will use as default value. When you set suggestion=true the script will generate search suggestions list for search field based on content of variable called suggestionText. If you don’t want suggestion list to appear set suggestion=false.
Preview and Download
Note: since Safari has it’s own behaviors for input elements this script is disabled for that browser.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (59 Comments)
Sorry, the comment form is closed at this time.