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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function initSafariSearch() { 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:
1 2 3 4 5 6 7 8 9 10 11 12 | function initSearchFocus() { $('#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!
Share the love:
Related posts:
- Internet Explorer, Doctypes, document.documentElement, And You
- A Simple Deploy Script
- Check The Validity Of A YouTube Video With PHP
- Have You Been Tango'd (Yet?)
- Loading HD Videos Through The YouTube Player API
Posted in: CSS, Design, Development, JavaScript, OS X, XML on Friday, August 7th, 2009.
You can leave a response, or trackback from your own site.
Great one, cheers Ahmed!
Posted: August 7, 2009 at 9:36 am;