Search form plus autocomplete
by Ryan Brackett
HTML
This is a search form plus autocomplete<br/><br/>
<form method="get" action="https://www.nghs.com/fm/search/">
<input id="autocomplete" d="query" name="query" onfocus="if(this.value=='Search Here'){this.value=''};" onblur="if(this.value==''){this.value='Search Here'};" class="search-box" value="Search Here">
<input class="go-btn" onclick="this.form.submit();" value="Go" type="button">
</form>
CSS
body {font-family: arial; padding: 30px;}
input {padding: 5px;}
.ui-autocomplete.ui-menu {padding: 10px 0px;}
.ui-autocomplete.ui-menu a { cursor: pointer;}
JavaScript
var source = [ { value: "Spencer Kline",
label: "Spencer Kline",
url: "http://www.google.com"
},
{ value: "James Bond",
label: "James Bond",
url: "http://www.example.com"
}
];
$("input#autocomplete").autocomplete({
source: source,
select: function( event, ui ) {
window.location.href = ui.item.url;
}
});