Return to Snippet

Revision: 1869
at November 22, 2009 18:15 by ebukva


Updated Code
/*
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);

Revision: 1868
at November 22, 2009 18:13 by ebukva


Updated Code
/*
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.
*/

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);

Revision: 1867
at November 16, 2006 14:42 by ebukva


Updated Code
// upgradeSearchOnWebkitBrowsers function makes the search
// inputboxes 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 trigger Webkit browsers (such as Safari
// and OmniWeb) to show the goodie.
// JavaScript is used to do this since these particular attributes
// are not the standard and will break the validation.
// All non-Webkit browsers should ignore the attributes
// and display the regular input box.

function upgradeSearchOnWebkitBrowsers() {
	if (!document.getElementById) return false;         // if the browser doesn't support this dom method, droup 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 untill 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);

Revision: 1866
at November 16, 2006 14:41 by ebukva


Initial Code
// upgradeSearchOnWebkitBrowsers function makes the search
// inputboxes in an html form appear and behave like 
// search fields in Mac 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 trigger Webkit browsers (such as Safari
// and OmniWeb) to show the goodie.
// JavaScript is used to do this since these particular attributes
// are not the standard and will break the validation.
// All non-Webkit browsers should ignore the attributes
// and display the regular input box.

function upgradeSearchOnWebkitBrowsers() {
	if (!document.getElementById) return false;         // if the browser doesn't support this dom method, droup 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 untill 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);

Initial URL

                                

Initial Description

                                

Initial Title
upgradeSearchOnWebkitBrowsers

Initial Tags
search

Initial Language
JavaScript