alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
348 lines (307 loc) • 8.98 kB
HTML
<html>
<head>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../dist/typeahead.bundle.js"></script>
<style>
.container {
width: 800px;
margin: 50px auto;
}
.typeahead-wrapper {
display: block;
margin: 50px 0;
}
.tt-dropdown-menu {
background-color: #fff;
border: 1px solid #000;
}
.tt-suggestion.tt-cursor {
background-color: #ccc;
}
.triggered-events {
float: right;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<textarea class="triggered-events"></textarea>
<form action="/where" method="GET">
<div class="typeahead-wrapper">
<input class="states" name="states" type="text" placeholder="states" value="Michigan">
<input type="submit">
</div>
</form>
<div class="typeahead-wrapper">
<input class="bad-tokens" type="text" placeholder="bad tokens">
</div>
<div class="typeahead-wrapper">
<input class="regex-symbols" type="text" placeholder="regex symbols">
</div>
<div class="typeahead-wrapper">
<input class="header-footer" type="text" placeholder="header footer">
</div>
<div class="typeahead-wrapper">
<input class="ltr" type="text" placeholder="ltr">
</div>
<div class="typeahead-wrapper">
<input class="rtl" type="text" placeholder="rtl">
</div>
<div class="typeahead-wrapper">
<input class="mixed" type="text" placeholder="mixed">
</div>
</div>
</div>
<script>
var states = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: 'Alabama' },
{ val: 'Alaska' },
{ val: 'Arizona' },
{ val: 'Arkansas' },
{ val: 'California' },
{ val: 'Colorado' },
{ val: 'Connecticut' },
{ val: 'Delaware' },
{ val: 'Florida' },
{ val: 'Georgia' },
{ val: 'Hawaii' },
{ val: 'Idaho' },
{ val: 'Illinois' },
{ val: 'Indiana' },
{ val: 'Iowa' },
{ val: 'Kansas' },
{ val: 'Kentucky' },
{ val: 'Louisiana' },
{ val: 'Maine' },
{ val: 'Maryland' },
{ val: 'Massachusetts' },
{ val: 'Michigan' },
{ val: 'Minnesota' },
{ val: 'Mississippi' },
{ val: 'Missouri' },
{ val: 'Montana' },
{ val: 'Nebraska' },
{ val: 'Nevada' },
{ val: 'New Hampshire' },
{ val: 'New Jersey' },
{ val: 'New Mexico' },
{ val: 'New York' },
{ val: 'North Carolina' },
{ val: 'North Dakota' },
{ val: 'Ohio' },
{ val: 'Oklahoma' },
{ val: 'Oregon' },
{ val: 'Pennsylvania' },
{ val: 'Rhode Island' },
{ val: 'South Carolina' },
{ val: 'South Dakota' },
{ val: 'Tennessee' },
{ val: 'Texas' },
{ val: 'Utah' },
{ val: 'Vermont' },
{ val: 'Virginia' },
{ val: 'Washington' },
{ val: 'West Virginia' },
{ val: 'Wisconsin' },
{ val: 'Wyoming' }
]
});
states.initialize();
$('.states').typeahead({
highlight: true
},
{
displayKey: 'val',
source: states.ttAdapter()
});
var badTokens = new Bloodhound({
datumTokenizer: function(d) { return d.tokens; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{
value1: 'all bad',
jake: '111',
tokens: [' ', ' ', null, undefined, false, 'all', 'bad']
},
{
value1: 'whitespace',
jake: '112',
tokens: [' ', ' ', '\t', '\n', 'whitespace']
},
{
value1: 'undefined',
jake: '113',
tokens: [undefined, 'undefined']
},
{
value1: 'null',
jake: '114',
tokens: [null, 'null']
},
{
value1: 'false',
jake: '115',
tokens: [false, 'false']
}
]
});
badTokens.initialize();
$('.bad-tokens').typeahead(null, {
displayKey: 'value1',
source: badTokens.ttAdapter()
});
var regexSymbols = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: '*.js' },
{ val: '[Tt]ypeahead.js' },
{ val: '^typeahead.js$' },
{ val: 'typeahead.js(0.8.2)' },
{ val: 'typeahead.js(@\\d.\\d.\\d)' },
{ val: 'typeahead.js@0.8.2' }
]
});
regexSymbols.initialize();
$('.regex-symbols').typeahead(null, {
displayKey: 'val',
source: regexSymbols.ttAdapter()
});
var abc = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: 'a' },
{ val: 'ab' },
{ val: 'abc' },
{ val: 'abcd' },
{ val: 'abcde' }
]
});
abc.initialize();
$('.header-footer').typeahead(null, {
displayKey: 'val',
source: abc.ttAdapter(),
templates: {
header: '<h3>Header</h3>',
footer: '<h3>Footer</h3>'
}
},
{
displayKey: 'val',
source: abc.ttAdapter(),
templates: {
header: '<h3>start</h3>',
footer: '<h3>end</h3>',
empty: '<h3>empty</h3>'
}
});
var ltr = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: "one" },
{ val: "two three" },
{ val: "four" },
{ val: "five six" },
{ val: "seven" }
]
});
ltr.initialize();
$('.ltr').typeahead({
highlight: true
},
{
displayKey: 'val',
source: ltr.ttAdapter()
});
var rtl = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: "שלום" },
{ val: "ערב טוב" },
{ val: "מה שלומך" },
{ val: "רב תודות" },
{ val: "אין דבר" }
]
});
rtl.initialize();
$('.rtl').typeahead({
highlight: true
},
{
displayKey: 'val',
source: rtl.ttAdapter()
});
var mixed = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.val);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ val: "שלום" },
{ val: "ערב טוב" },
{ val: "מה שלומך" },
{ val: "one" },
{ val: "two three" }
]
});
mixed.initialize();
$('.mixed').typeahead({
highlight: true
},
{
displayKey: 'val',
source: mixed.ttAdapter()
});
$('input').on([
'typeahead:initialized',
'typeahead:initialized:err',
'typeahead:selected',
'typeahead:autocompleted',
'typeahead:cursorchanged',
'typeahead:opened',
'typeahead:closed'
].join(' '), logTypeaheadEvent);
$('form').on('submit', logSubmitEvent);
function logSubmitEvent($e) {
var text;
$e && $e.preventDefault();
text = JSON.stringify($(this).serializeArray());
writeToTextarea('submit', text);
}
function logTypeaheadEvent($e) {
var args, type, text;
args = [].slice.call(arguments, 1);
type = $e.type;
text = window.JSON ? JSON.stringify(args) : '';
writeToTextarea(type, text);
}
function writeToTextarea(/* lines */) {
var $textarea, val, text;
$textarea = $('.triggered-events');
val = $textarea.val();
text = [].join.call(arguments, '\n');
$textarea.val([val, text, '\n'].join('\n'));
$textarea[0].scrollTop = $textarea[0].scrollHeight;
}
</script>
</body>
</html>