autocomplete select submit form
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<label for="states">Enter State:</label>
<input id="states">
<button id="go">GO</button>
<div id="no-result" style="display: none;">State not found.</div>
JavaScript
$("#go").click(function () {
btnGoClick();
});
$("#states").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
btnGoClick();
}
});
var defaultNoMatchUrl = "http://www.google.com";
var currentUrl = "";
$(function () {
var stateList = [{
"value": "Tennessee",
"url": "http://www.tennessee.gov"
}, {
"value": "Texas",
"url": "http://www.texas.gov"
}, {
"value": "Colorado",
"url": "http://www.colorado.gov"
}, {
"value": "Connecticut",
"url": "http://www.ct.gov"
}];
$("#states").autocomplete({
source: stateList,
autoFocus: true,
minLength: 3,
select: function (event, ui) {
go(ui.item.url);
},
response: function (event, ui) {
if (!ui.content.length) {
$("#no-result").show();
currentUrl = defaultNoMatchUrl;
} else {
$("#no-result").hide();
}
},
focus: function (event, ui) {
currentUrl = ui.item.url;
}
});
});
function go(url) {
window.open(url);
}
function btnGoClick() {
if (currentUrl !== "") go(currentUrl);
}