Text inputs Input fields with options
A simple example of using Alpaca with nothing more than a string of text. Alpaca looks at your data and determines that it is a string. It then looks for a suitable candidate for representing a string and it decides to use the text field.
// Basic text input
$("#alpaca-basic").alpaca({
"data": "I Love Alpaca Ice Cream!"
});Displays a text field using a display-only view. The text field simply prints out and is not editable, a simple block appears instead. This is a default form control type provided by Bootstrap framework.
Show source code ←// Display only view
$("#alpaca-static").alpaca({
"data": "I Love Alpaca Ice Cream!",
"schema": {
"type": "string"
},
"view": "bootstrap-display"
});In this example text input field has label. By default appears on top left and uses default Bootstrap styles, including contetual alternatives. To add text label to any input field, use label option inside set of configuration options.
// Text input label
$("#alpaca-input-label").alpaca({
"data": "I Love Alpaca Ice Cream!",
"options": {
"label": "Input label"
}
});In this example static input field has label. By default appears on top left and uses default Bootstrap styles, including contetual alternatives. To add text label to any input field, use label option inside set of configuration options.
// Static input label
$("#alpaca-static-label").alpaca({
"data": "I Love Alpaca Ice Cream!",
"schema": {
"type": "string"
},
"options": {
"label": "Input label"
},
"view": "bootstrap-display"
});A more developed example that specifies not only the data but also the schema, options and some basic input validation. In this example text field is limited to minimum 3 characters and maximum 5 characters. Try to change default input value.
Show source code ←// Validation
$("#alpaca-validation").alpaca({
"data": "Mint",
"schema": {
"minLength": 3,
"maxLength": 5
},
"options": {
"label": "Ice Cream",
"helper": "Your favorite ice cream?",
"size": 30
}
});In this example, we intentionally set the data to something that is invalid. The schema specifies that the maximum length of the allowed value is 8 characters. Our value exceeds that and so we receive a message straight away indicating this problem.
Show source code ←// Predefined value
$("#alpaca-validation-predefined").alpaca({
"data": "Mint Chocolate",
"schema": {
"minLength": 3,
"maxLength": 5
},
"options": {
"label": "Ice Cream",
"helper": "Please tell us the kind of ice cream you love most!",
"size": 30,
"placeholder": "Enter an ice cream flavor"
}
});A text with field with disallowEmptySpaces set to true. This prevents the entry of spaces - it doesn't react on pressing space key. This is useful for things like username entry fields, as configured below.
// Disallow empty spaces
$("#alpaca-disallow-empty").alpaca({
"schema": {
"type": "string"
},
"options": {
"type": "lowercase",
"label": "User Name",
"disallowEmptySpaces": true,
"helper": "Type something with empty space",
"focus": false
}
});In this example we've added a few predefined values, that are not allowed by default. Just place values you want to disallow into disallow option, this will enable input field validation. Try to change input field value to see it in action.
// Disallow values
$("#alpaca-disallow-values").alpaca({
"data": "Mickey Mantle",
"schema": {
"type": "string",
"disallow": ["Mickey Mantle", "Mickey"]
},
"options": {
"label": "Name",
"focus": false
}
});This example uses $.typeahead auto-completion with a function to provide lookup values. The config block defines the first argument into the typeahead plugin. The datasets block defines the second argument into the typeahead plugin.
// Typeahead
$("#alpaca-typeahead").alpaca({
"schema": {
"type": "string"
},
"options": {
"type": "text",
"label": "Company Name",
"helper": "Select the name of a cloud computing company",
"typeahead": {
"config": {
"autoselect": true,
"highlight": true,
"hint": true,
"minLength": 1
},
"datasets": {
"type": "local",
"source": function(query) {
var companies = ["Cloud CMS", "Amazon", "HubSpot"];
var results = [];
for (var i = 0; i < companies.length; i++) {
var add = true;
if (query) {
add = (companies[i].indexOf(query) === 0);
}
if (add) {
results.push({
"value": companies[i]
});
}
}
return results;
}
}
}
}
});This example constrains the entered text value, forcing it to be at minimum 3 and at most 25. This not only runs validation checks but also enforces some UI behavior. This also shows how many characters are left for maxLength as you type.
// Maxlength
$("#alpaca-maxlength").alpaca({
"schema": {
"type": "string",
"minLength": 3,
"maxLength": 25
},
"options": {
"type": "text",
"label": "What is your name?",
"constrainMaxLength": true,
"constrainMinLength": true,
"showMaxLengthIndicator": true
},
"data": "Jackie Robinson"
});Textarea type Basic examples of textarea
The following example demonstrates a simple textarea field with a string of text. Textarea type supports almost all available options for text inputs and also includes basic textarea attributes, such as columns and rows.
Show source code ←// Basic textarea
$("#alpaca-textarea").alpaca({
"data": "Ice cream or ice-cream",
"options": {
"type": "textarea",
"label": "Receipt",
"helper": "Receipt for Best خانهmade Ice Cream",
"rows": 4,
"cols": 80,
"focus": false
}
});The following example uses the placeholder option to set up the placeholder text for a text area field. This basic option is available in all input types: text, number, search, url, email, textarea etc.
// With placeholder
$("#alpaca-textarea-placeholder").alpaca({
"options": {
"type": "textarea",
"label": "Receipt",
"helper": "Receipt for Best خانهmade Ice Cream",
"placeholder": "Enter your favorite ice cream here..."
"rows": 4,
"cols": 80,
"focus": false
}
});In the following example textarea field is rendered in display-only mode, which means textarea is replaced with div block and can't be editable. To set a view only mode, use bootstrap-displayoption added to view option.
// View mode
$("#alpaca-textarea-static").alpaca({
"data": "Ice cream or ice-cream",
"options": {
"type": "textarea",
"label": "Receipt",
"rows": 6,
"cols": 80,
"focus": false
},
"view": "bootstrap-display"
});The following example overrides the view property on the field to have just the single field render in an alternate, display-only view. To make it short - view property here is placed inside options property.
// Single field render
$("#alpaca-textarea-override").alpaca({
"data": "My name is Dr. Jacobian",
"schema": {
"type": "string"
},
"options": {
"type": "textarea",
"label": "Tell us about yourself",
"view": "bootstrap-display"
}
});Select menus Basic selects, Multiselect and Select2
Select field with data, options and schema parameters. As default, a select field will be rendered if schema enum property has more than 3 options. The sort order for enumerated values and their text are assumed to be alphanumeric.
Show source code ←// Basic select
$("#alpaca-select").alpaca({
"data": "coffee",
"schema": {
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
},
"options": {
"label": "Ice cream",
"helper": "What flavor of ice cream do you prefer?"
}
});Select field with external data source using dataSource option. If a string, it is considered to be a URI to a service that produces a object containing key/value pairs or an array of elements. Function needs to produce the same list.
// External data source
$("#alpaca-select-external").alpaca({
"options": {
"label": "Ice cream",
"helper": "Guess my favorite ice cream?",
"type": "select",
"dataSource": "../../demo_data/alpaca/demo_data.json"
}
});The following example demonstrates select menu with multiple select option, based on Bootstrap Multiselect plugin. Default multiselect doesn't provide styled checkboxes, so we are using Uniform plugin for custom look.
// Multiselect
$("#alpaca-multiselect").alpaca({
"data": ["Vanilla", "Chocolate"],
"schema": {
"type": "array",
"items": {
"title": "Ice Cream",
"type": "string",
"enum": ["Vanilla", "Chocolate", "Strawberry", "Mint"],
"minItems": 2,
"maxItems": 3
}
},
"options": {
"label": "Ice cream",
"helper": "Guess my favorite ice cream?",
"type": "select",
"size": 5,
"id": "multiselect"
},
"postRender": function(control) {
$("#multiselect").parent().find("input[type=checkbox]").uniform();
}
});Select field with external data source using dataSource option. If a string, it is considered to be a URI to a service that produces a object containing key/value pairs or an array of elements. Function needs to produce the same list.
// Multiselect with remote data
$("#alpaca-multiselect-remote").alpaca({
"options": {
"label": "Select your favorite flavor of ice cream",
"type": "select",
"multiple": true,
"helper": "Guess my favorite ice cream?",
"size": 3,
"id": "multiselect-remote",
"dataSource": "../default/assets/demo_data/alpaca/selects.json"
},
"postRender": function(control) {
$("#multiselect-remote").parent().find("input[type=checkbox]").uniform();
}
});The following example demonstrates default implementation of Select2 library - here we need to specify select ID first, then initialize Select2 plugin using that ID selector. This is a custom integration, which is not supported in Alpaca by default.
Show source code ←// Select2 select
$("#alpaca-select2").alpaca({
"data": "coffee",
"schema": {
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
},
"options": {
"label": "Ice cream",
"helper": "What flavor of ice cream do you prefer?",
"id": "select2-basic"
},
"postRender": function(control) {
$('#select2-basic').select2({
minimumResultsForSearch: Infinity
});
}
});The following example demonstrates Select2 select with search field - here we need to specify select ID first, then initialize Select2 plugin using that ID selector. This is a custom integration, which is not supported in Alpaca by default.
Show source code ←// Select2 select with search
$("#alpaca-select2-search").alpaca({
"data": "coffee",
"schema": {
"enum": ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
},
"options": {
"label": "Ice cream",
"helper": "What flavor of ice cream do you prefer?",
"id": "select2-search"
},
"postRender": function(control) {
$('#select2-search').select2({
minimumResultsForSearch: Infinity
});
}
});