rmcvey/filtered.html

## filtered.html
<DOCTYPE!>
<html>
	<head>
		<title>Filtered Search</title>
		<script type="text/javascript" src="https://raw.github.com/rmcvey/jsper/master/jsper.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var saved = document.getElementById('saved');
				jsper.each('filters', function(item){
					var element = document.createElement('option');
					element.setAttribute('value', item.filter);
					element.innerHTML = item.name;
					saved.appendChild(element);
				});

				var empty = function(){
					for(var i = 0; i < arguments.length; i++){
						if(arguments[i] == "" || arguments[i] === undefined){
							return true;
						}
					}
				}

				var add_item = function(item){
					var element = document.createElement('option');
					element.setAttribute('value', item.filter);
					element.innerHTML = item.name;
					saved.appendChild(element);
				}

				document.getElementById('search').onclick = function(){
					var filter = document.getElementById('saved').value;
					var search = document.getElementById('q').value;
					var url = "http://www.google.com/search?q="+search+' '+filter;
					location.href = url;
				};

				document.getElementById('save').onclick = function(){
					var filter = document.getElementById('filter');
					var name = document.getElementById('name');
					if(empty(name.value, filter.value)){
						return false;
					}
					var filters = jsper.get('filters') || [];
					filters.push({
						'filter':filter.value,
						'name':name.value
					});
					jsper.set('filters', filters);
					var element = document.createElement('option');
					element.setAttribute('value', filter.value);
					element.innerHTML = name.value;
					saved.appendChild(element);
				};
			};
		</script>
		<style type="text/css">
			body{font-family:Tahoma;font-size:11px;}
			label{display:block;}
			h3{margin:0;}
			div{margin:15px;}
			input[type=text]{
				width:30%;
			}
		</style>
	</head>
	<body>
		<div id="fsearch">
			<h3>Filtered Search</h3>
			<input type="text" name="q" id="q" value="Enter your search term" onfocus="(this.value == 'Enter your search term') ? this.value = '' : true;">
			<select name="saved" id="saved"></select>
			<input type="button" id="search" value="Search" />
		</div>

		<div id="ssearch">
			<h3>Create new filtered search</h3>
			<label for="name">Name Filter</label>
			<input type="text" id="name" name="name" />
			<label for="filter">Enter Filter</label>
			<input type="text" id="filter" name="filter" /><input type="button" name="save" id="save" value="Save" />
		</div>
	</body>
</html>
	<DOCTYPE!>
	<html>
	<head>
	<title>Filtered Search</title>
	<script type="text/javascript" src="https://raw.github.com/rmcvey/jsper/master/jsper.js"></script>
	<script type="text/javascript">
	window.onload = function(){
	var saved = document.getElementById('saved');
	jsper.each('filters', function(item){
	var element = document.createElement('option');
	element.setAttribute('value', item.filter);
	element.innerHTML = item.name;
	saved.appendChild(element);
	});

	var empty = function(){
	for(var i = 0; i < arguments.length; i++){
	if(arguments[i] == "" \|\| arguments[i] === undefined){
	return true;
	}
	}
	}

	var add_item = function(item){
	var element = document.createElement('option');
	element.setAttribute('value', item.filter);
	element.innerHTML = item.name;
	saved.appendChild(element);
	}

	document.getElementById('search').onclick = function(){
	var filter = document.getElementById('saved').value;
	var search = document.getElementById('q').value;
	var url = "http://www.google.com/search?q="+search+' '+filter;
	location.href = url;
	};

	document.getElementById('save').onclick = function(){
	var filter = document.getElementById('filter');
	var name = document.getElementById('name');
	if(empty(name.value, filter.value)){
	return false;
	}
	var filters = jsper.get('filters') \|\| [];
	filters.push({
	'filter':filter.value,
	'name':name.value
	});
	jsper.set('filters', filters);
	var element = document.createElement('option');
	element.setAttribute('value', filter.value);
	element.innerHTML = name.value;
	saved.appendChild(element);
	};
	};
	</script>
	<style type="text/css">
	body{font-family:Tahoma;font-size:11px;}
	label{display:block;}
	h3{margin:0;}
	div{margin:15px;}
	input[type=text]{
	width:30%;
	}
	</style>
	</head>
	<body>
	<div id="fsearch">
	<h3>Filtered Search</h3>
	<input type="text" name="q" id="q" value="Enter your search term" onfocus="(this.value == 'Enter your search term') ? this.value = '' : true;">
	<select name="saved" id="saved"></select>
	<input type="button" id="search" value="Search" />
	</div>

	<div id="ssearch">
	<h3>Create new filtered search</h3>
	<label for="name">Name Filter</label>
	<input type="text" id="name" name="name" />
	<label for="filter">Enter Filter</label>
	<input type="text" id="filter" name="filter" /><input type="button" name="save" id="save" value="Save" />
	</div>
	</body>
	</html>