Search_Box behavior examples and demos

Showcased here are some possible implementations of various search boxes and their onfocus and onblur behavior. Everything is done using the Search_Box constructor. Styling is done via CSS only, which gives you maximum flexibility.

You can find detailed explanations in the blog post which also contains links to the fully documented source (which in turn contains even more implementation details).

Line wraps inside code blocks are marked with »

Example #1

An advanced example showing off multiple onfocus and onblur handlers

HTML:

<input type="text" name="q1" id="q1" value="" />

Javascript:

custom_cfg = {
    ELEMENT_ID: 'q1',
    DEFAULT_VALUE: 'Give me focus :)',
    FOCUSED_VALUE: 'Now start typing :)',
    focus: function () { this.style.border = '1px solid #333'; },
    blur: function () { this.style.border = '1px solid #abc'; }
};
var s1 = new Search_Box(custom_cfg);
s1.init();

Example #2

A simple search box (testing defaults)

HTML:

<input type="text" name="q2" id="q2" />

Javascript:

var s2 = new Search_Box({
    ELEMENT_ID: 'q2',
    DEFAULT_VALUE: 'Search...'
});
s2.init();

Example #3

A simple focus with text selected during the focus phase

HTML:

<input type="text" name="q3" id="q3" value="Some default" />

Javascript:

var s3 = new Search_Box({
    ELEMENT_ID: 'q3',
    FOCUSED_VALUE: 'Start typing...'
});
s3.init();

Now, for some fancy CSS styling and a nice trick for Safari (type="search", courtesy of Marko Dugonjić).

Example #4

A sexy search box looking and acting almost like a true location bar

HTML:

<div class="field">
    <input id="q4" class="input_text" type="search" size="16" results="5" name="q4"»
    value="Search..." placeholder="Search..." />
    <input class="input_image" type="image" src="i/go.gif" alt="Search" />
</div>

Javascript:

var s4 = new Search_Box({
    ELEMENT_ID: 'q4',
    DEFAULT_VALUE: 'Hello from the fake location bar :)',
    FOCUSED_VALUE: 'Hidden message for slow typists :)'
});
s4.init();

Example #5

Woot! Rounded sweetness

HTML:

<div class="fieldwrap">
    <input id="q5" class="input_text" type="search" name="q5" value="Hawt!"»
    results="5" placeholder="Hawt!" />
</div>

Javascript:

var s5 = new Search_Box({
    ELEMENT_ID: 'q5',
    DEFAULT_VALUE: 'Steamy windows!'
});
s5.init();

Example #6

Changing classNames with custom focus and blur handlers

HTML:

<input id="q6" class="input_text" type="text" name="q6" value="Almost invisible..." />

Javascript:

var s6_cfg = {
	ELEMENT_ID: 'q6',
	DEFAULT_VALUE: 'Almost invisible...',
	FOCUSED_VALUE: 'Focused and ugly!',
	focus: function() { 
		if (this.className.indexOf('q6-blurry') !== -1) {
			this.className = this.className.replace(/ q6-blurry/g, ' q6-focused');
		} else { 
			this.className += ' q6-focused'; 
		}
	},
	blur: function() { this.className = this.className.replace(/ q6-focused/g, ' q6-blurry'); }
}
var s6 = new Search_Box(s6_cfg);
s6.init();