Sevencolors studies:
experiments with Javascript, CSS, PHP and web standards

Printer icon

Tags search

Javascript search form

The Javascript code in the <head> of the page or, better, imported from an external file:

function tag_search(s){
if(s == 'deli'){
var d = document.getElementById('d_tag').value;
document.location = 'http://del.icio.us/tag/' + d.replace(/ +/g,"+");
}else if(s == 'tech'){
var t = document.getElementById('t_tag').value;
document.location = 'http://technorati.com/tags/' + t.replace(/ +/g,"+");
}
}

function search_tags(){
var obj = document.getElementsByTagName('form');
if(!obj) return;
for(f=0;f<obj.length;f++){
if(obj[f].id == 'deli' || obj[f].id == 'tech'){
obj[f].onsubmit = function(){tag_search(this.id);return false};
}
}
}

function make_search(){
var div = document.createElement('div');
div.setAttribute('id','tags_search');
var pos = document.getElementById('content');
var par = pos.parentNode;
par.insertBefore(div,pos);
var div_d = "<div id='delicious_search'>
<a href='http://del.icio.us'>del.icio.us</a> /&nbsp;
<a href='http://del.icio.us/tag'>tag</a> /&nbsp;<form id='deli'>
<input id='d_tag' type='text' size='12' />&nbsp;
<input type='submit' value='search' /></form></div>";
var div_t = "<div id='technorati_search'>
<a href='http://technorati.com'>technorati</a> /&nbsp;
<a href='http://technorati.com/tags'>tags</a> /&nbsp;
<form id='tech'><input id='t_tag' type='text' size='12' />&nbsp;
<input type='submit' value='search' /></form></div>";
div.innerHTML = div_d + div_t;
search_tags();
}
window.onload = make_search;

Since the functioning of the search form is based on Javascript if it is not enabled the search form would not appear at all. The code is written for the two sites I use most to search for tags (Delicious and Technorati) but it could be changed to anything else. Use CSS to adapt the appearance of the search form to the layout of your site. The two search forms can be seen on the home page of this site.