Saturday, November 12, 2011

Sample Google Style Search Box (with watermark)

In .html or .aspx page,

<form id='i-search-box' target='_blank' action='http://www.iblogseeker.com/search.aspx'>

<input type='text' name='query' size='30' width='155px'

style='border: 1px solid rgb(126, 157, 185);

padding: 2px;

background: rgb(255, 255, 255) url(http://www.iblogseeker.com/images/link/iblog-search.gif)no-repeat scroll left center;

-moz-background-clip: border;

-moz-background-origin: padding;

-moz-background-inline-policy: continuous;' />

<input type='submit' name='sa' value='Search' />

<form>

<script type='text/javascript' src='http://www.iblogseeker.com/js/extSearch.js'><script>

In extSearch.js,

(function () {

var f = document.getElementById('i-search-box');

if (!f) {

f = document.getElementById('searchbox_demo');

}

if (f && f.query) {

var q = f.query;

var n = navigator;

var l = location;

if (n.platform == 'Win32') {

q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;';

}

var b = function () {

if (q.value == '') {

q.style.background = '#FFFFFF url(http://www.iblogseeker.com/images/link/iblog-search.gif) left no-repeat';

}

};

var f = function () {

q.style.background = '#ffffff';

};

q.onfocus = f;

q.onblur = b;

if (!/[&?]q=[^&]/.test(l.search)) {

b();

}

}

})();

It press “Search” button, now it redirect to url like this “http://www.iblogseeker.com/search.aspx?query=aspmemo&sa=Search”. You can change the watermark image and action url as you want. You can also use in Blog or any other page as "link us" search box.

No comments:

Post a Comment