Following code allows you to change the behaviour of the JQuery Autocomplete plugin to allow matching items to be clicked and following a specific URL.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.ui-menu .ui-menu-item a
{
text-decoration:underline;
cursor:pointer;
cursor:hand;
}
</style>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [ { id : 1, value : "c++" },
{ id : 2, value : "java" },
{ id : 3, value : "php" },
{ id : 4, value : "coldfusion" },
{ id : 5, value : "javascript" },
{ id : 6, value : "asp" },
{ id : 7, value : "ruby" }
],
open: function(event, ui) {
$("ul.ui-autocomplete").unbind("click");
var data = $(this).data("autocomplete");
console.log(data);
for(var i=0; i<=data.options.source.length-1;i++)
{
var s = data.options.source[i];
$("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "directory/listing/" + s.id);
}
}
});
/*
$("input#autocomplete").bind("autocompleteselect", function(event, ui) {
//alert(ui.item.id + ' - ' + ui.item.value);
//document.location.href = ui.item.id + '/' + ui.item.value;
//event.preventDefault;
} );
*/
});
</script>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
0 comments:
Post a Comment