Friday, August 7th, 2009
So recently I published a post that contained a quick and simple browser detection snippet for jQuery. In that snippet, I accidently left a reference to a function called “initSafariSearch()”.
This function simply replaces the standard boring input text box with the nice Safari style one.
So without blabbing on more, here’s the code:
{
if ( $('#searchinput').length > 0)
{
var input = document.getElementById( 'searchinput' );
input.setAttribute( 'type', 'search' );
input.setAttribute( 'results', '5' );
input.setAttribute( 'placeholder', 'Search...' );
input.setAttribute( 'autosave', 'com.ahmednuaman' );
input.setAttribute( 'width', '70%' );
$('#searchimage').hide();
$('#searchsubmit').hide();
}
}
Now for the finer points:
Why are you using “getElementById()” instead of $()?
Well, jQuery is a standards compliant framework, and since the input type of “search” isn’t standards compliant, jQuery can’t/won’t (I’m not sure of which) render it. Therefore you’ve got to “cheat” and use the old school method.
What’s all these other attributes?
Well here’s a quick rundown:
- Autosave: whether or not to save the inputted text, you can specify a boolean or the package name, so mine’s “com.ahmednuaman”
- Results: how many autosaved results to show when you’re inputting your query
- Placeholder: the default text
And further more, if you add this little bit of trickery, you can get the placeholder default text to toggle in and out on focus:
{
$('#searchinput').focus(function()
{
$(this).val( $(this).val() == 'Search...' ? '' : $(this).val() );
});
$('#searchinput').blur(function()
{
$(this).val( $(this).val() == '' ? 'Search...' : $(this).val() );
});
}
Cool yeah? Tell me what you think!
