Facebook’s cool cross-platform search field
A while ago I discovered that by setting an HTML INPUT tag’s type attribute to search, Safari on OS X would show the OS X search widget instead of the standard boring HTML input field. Andrew Escobar has a good introduction and an example screenshot:
This search widget is extremely user-friendly and space-efficient; there is no need for a “Go” or “Search” button anymore.
It also downgrades gracefully to a normal input field for other browsers, but this is unfortunately not enough:
- There’s no placeholder text explaining what you can search for
- There’s no magnifying glass or special styling giving a hint that this is a search box
Taken together it means you have to add explanatory text and a “Search” submit button after it for people to understand how to use it, destroying the user-friendliness and space efficiency and offered by the Safari widget.
I’ve noticed that more and more sites were using the Safari search widget without any “Search” submit button, so I figured they must have found a way to make it cross-platform. I spent some time on facebook.com today and noticed they had the Safari search widget… and… sure enough, for Firefox and IE a nice JavaScript version!
I decided to do some reverse engineering…
facebook.com’s search widget stripped down
The relevant portions of the HTML file:
<form method="get" action="/search/" name="qsearch" id="netsearch">
<input id="qn" name="q" class="inputtext inputsearch" value="Search"
type="search" placeholder="Search within China"
results="10" autosave="net.exoweb.oursite" />
<script type="text/javascript">placeholderSetup(’qn’);</script>
</form>
and the CSS file:
.inputsearch {
background: white url(magglass.png) no-repeat scroll 3px 4px;
padding-left: 17px;
}
It was overall very easy to figure out, and that’s all there is to it! I’m sure it’ll be easy to convert the event handler stuff to use Dojo or some other Ajax framework.
If someone ever expands the Ajax version of the search widget to support something like the onsearch feature, for live search, please let me know. 