<script type="text/javascript">
$(function() {
var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", ...);
var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
'ui-darkness', 'ui-lightness', 'varder');
$('#basic').puiautocomplete({
completeSource: countries
});
$('#dropdown').puiautocomplete({
completeSource: countries,
dropdown: true
});
$('#customcontent').puiautocomplete({
completeSource: themes,
content: function(data) {
return '<img src="resources/demo/images/themes/' + data.label + '.png" alt="" /><span style="float:right;font-size:14px">'
+ data.label + '</span>';
}
});
$('#multiple').puiautocomplete({
completeSource: countries,
multiple: true,
select: function(event, item) {
$('#growl').puigrowl('show', [{severity: 'info', summary: 'City Selected', detail: item.data('label')}]);
},
unselect: function(event, item) {
$('#growl').puigrowl('show', [{severity: 'info', summary: 'City Unselected', detail: item.data('label')}]);
}
});
$('#remote').puiautocomplete({
effect: 'fade',
effectSpeed: 'fast',
completeSource:function(request, response) {
$.ajax({
type: "GET",
url: './autocomplete',
data: {query: request.query},
dataType: "json",
context: this,
success: function(data) {
response.call(this, data);
}
});
}
});
$('#growl').puigrowl();
});
</script>
<h3 class="title title-short" style="margin-top: 0px;">Basic</h3>
<input id="basic" name="basic" type="text"/>
<h3 class="title title-short">Dropdown</h3>
<input id="dropdown" name="dropdown" type="text"/>
<h3 class="title title-short">Callback</h3>
<input id="callback" name="callback" type="text"/>
<h3 class="title title-short">Multiple</h3>
<input id="multiple" name="multiple" type="text"/>
<h3 class="title title-short">Remote</h3>
<input id="remote" name="remote" type="text"/>
<div id="growl"></div>