Skip to content

Instantly share code, notes, and snippets.

@bennettmcelwee

bennettmcelwee/search.html

Last active Feb 11, 2016
Embed
What would you like to do?
Show a search menu
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
.hide { display: none; }
.search, #term, #go {
display: block;
font: 20px/50px sans-serif;
width: 100%;
}
#term { padding-left: 10px; }
</style>
<div id="searches"></div>
<form id="searchform" class="hide">
<input id="term"/>
<button id="go">Search</button>
</form>
<script>
const searches = [
{
name: 'AllMusic.com',
baseUrl: 'http://www.allmusic.com/',
searchRel: 'search/all/%s'
},
{
name: 'Bennett\'s Notebook',
baseUrl: 'http://thunderguy.com/',
searchRel: 'notebook/search/%s'
}
];
var list = document.getElementById('searches');
var form = document.getElementById('searchform');
var input = document.getElementById('term');
var button = document.getElementById('go');
searches.forEach(function(search) {
var item = document.createElement('button');
item.className = 'search';
item.innerHTML = search.name;
item.onclick = ask.bind(null, search);
list.appendChild(item);
})
function ask(search) {
button.innerHTML = 'Search ' + search.name;
button.onclick = function(event) {
event.preventDefault();
doSearch(search);
};
list.className = 'hide';
form.className = '';
term.focus();
}
function doSearch(search) {
window.location.href = input.value ? search.baseUrl + search.searchRel.replace('%s', input.value) : search.baseUrl;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment