<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fbautocomplete</title>
<!-- jquery and jquery-ui ARE mandatory! -->
<script src="requirements/jquery.js" type="text/javascript"></script>
<script src="requirements/jquery-ui.min.js" type="text/javascript"></script>
<!-- jquery UI provides basic style for autocompleter! -->
<link href="requirements/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- plugin script -->
<script src="fbautocomplete/fbautocomplete.js" type="text/javascript"></script>
<!-- provides fbautocomplete css for example, you should create your own based on this -->
<link href="fbautocomplete/fbautocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
/*
*
Simple
*
*/
$('#fbautocomplete_id').fbautocomplete();
/*
*
Advanced
*
*/
$('#fbautocomplete_id_advanced').fbautocomplete({
url: 'friends.php', // which url will provide json!
selected: [ { 'id': 20, 'title': 'Somebody' }],
maxItems: 2, // only one item can be selected
// do not use caching, always calls server even for something you have already typed.
// Probably you want to leave this on true
useCache: false,
onItemSelected : function($obj, itemId, selected) {
if (selected) {
add2Advanced("User with id = " + itemId + " has been added");
var titles = [];
for (var i in selected) titles[i] = selected[i].title;
add2Advanced("Current selected users: " + titles.join(", "));
}
},
onItemRemoved : function($obj, itemId) {
add2Advanced('User with id = ' + itemId + ' has been removed');
},
onAlreadySelected: function($obj) {
add2Advanced('That user is already selected');
}
});
function add2Advanced(str) {
$('#advanced_actions').html($('#advanced_actions').html() + '<br />' + str);
}
});
</script>
</head>
<body>
<div id="simple-example" style="text-align:center; margin: 40px auto; width: 700px">
<div style="float:left; padding-right: 10px">Type something: </div>
<div style="float:left">
<!-- You must provide parent for fbautocomplete (parent in example is simple div). Parent will be also changed by plugin!
So, please do not put anything important inside div other than autocomplete input -->
<div><input id="fbautocomplete_id" type="text" /></div>
</div>
<div style="clear: both"></div>
</div>
<div id="more-advanced" style="text-align:center; margin: 40px auto; width: 700px">
<div style="float:left; padding-right: 10px">Type something: </div>
<div style="float:left">
<!-- You must provide parent for fbautocomplete (parent in example is simple div). Parent will be also changed by plugin!
So, please do not put anything important inside div other than autocomplete input -->
<div><input id="fbautocomplete_id_advanced" type="text" /></div>
</div>
<div style="float:left" id="advanced_actions">
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
|
Download
