/ Published in: JavaScript
                    
                                        
                            
                                Expand |
                                Embed | Plain Text
                            
                        
                        Copy this code and paste it in your HTML
/*
upgradeSearchOnWebkitBrowsers function makes the search
input boxes in an HTML form appear and behave like
search fields in Mac OS X applications.
The function first looks if the page contains any forms
then looks for an input field that has the name="search"
attribute. When such input is found, it injects three
new attributes that make Webkit browsers (such as Safari
and OmniWeb) show the goodie.
JavaScript is used to do this since these particular attributes
are not standard HTML and will break the validation.
All non-Webkit browsers should ignore the attributes
and display the regular input box.
Dependencies:
- addLoadEvent (http://snipplr.com/view/1679/addloadevent/)
*/
function upgradeSearchOnWebkitBrowsers() {
if (!document.getElementById) return false; // if the browser doesn't support this dom method, drop out
var forms = document.getElementsByTagName("form");
if (forms[0] == null) return false; // if there are no forms on this page, drop out
var form = forms[0];
for (var j=0; j < forms.length; j++) { // if there are multiple forms loop through them
form = forms[j];
inputs = form.getElementsByTagName("input");
for (var i=0; i < inputs.length; i++) { // loop through all inputs until we find the one named "search"
var inputName = inputs[i].getAttribute("name");
if (inputName == "search") {
inputs[i].setAttribute("type","search");
inputs[i].setAttribute("autosave","autoSaveSearches");
inputs[i].setAttribute("results","5");
return false;
}
}
}
}
addLoadEvent(upgradeSearchOnWebkitBrowsers);
Comments
 Subscribe to comments
                    Subscribe to comments
                
                