jQuery plugin, allows you to easily customize html input's and select's into user friendly ui-widgets, with autocomplete, ajax-search, choosing multiple options and custom suggest template.
$('#example1').meta_input({data: [
"Afganistan",
"Albalia",
"Austria",
...
]});
$('#example2').meta_input({data: [
"Afganistan",
"Albalia",
...
], multiple: true, customValues: true});
Here you can also see extra option "customValues" - it allows user to input custom values, that's not in data list
$('#example3').meta_input();
No any options required, cause data option automaticly creates from select options.
$('#example2').meta_input({ajax: 'example.json'});
This code will call URL example.json?term=user_input
{"data": [
{"id": "1", "name": "Option One"},
...
]}
<input type="text" placeholder="Type to search" id="example5_1" value="Ukraine">
<script>
$(function(){
$('#example5_1').meta_input({data: ["USA", "Ukraine", ...]});
});
</script>
$('#example5_2').meta_input({
data: [
{"id": "1", "name": "Option One"},
{"id": "2", "name": "Option Two"},
],
value: {id: "1", name: "Option One"}
});
$('#example5_3').meta_input({
data: ["USA", "Ukraine", ...],
value: ["Ukraine", "Russia"], multiple: true
});
var sourcePeople = [
{
id:"1",
name:"Mark Zukerberg",
company:"Facebook",
pic:"img/pic1.jpg"
},
{
id:"2",
name:"Matt Cuts",
company:"Google",
pic:"img/pic2.jpeg"
},
...
];
$('#example6').meta_input({
data: sourcePeople,
suggestTemplate: '<table class="custom-suggest"><tr><td><img src="{{pic}}"></td><td><b>{{name}}</b><small>{{company}}</small></td></tr></table>'
});
All template placeholders, like "{{some_key}}" will be replaced with item's some_key value. Than use your CSS skills, to get what you want. My example presented above.
With help of options you can control most features of widget.
option | type | description | default | note |
---|---|---|---|---|
multiple | bool | Allow to select multiple values | false |
can be set to true with tag attribute "multiple". Be sure to use name attribute like "name[]" to receive multiple values after form submittingg |
data | array | Data for autocomplete | [] |
Can be used in format: ['Option 1', 'Option 2' ...] or [{id:1, name:'Option 1'}, {id:2, name:'Option 2' ...}] . Objects in array also can contain extra fields |
value | array|object|string | Pre selected value(s) | null |
Can be used in format: 'Option 1' , ['Option 1', 'Option 2' ...] or [{id:1, name:'Option 1'}, {id:2, name:'Option 2' ...}] . For more see example #5 |
ajax | string | Call $.getJSON(ajax, {term: term}) for getting data for autocomplete. |
'' |
Cannot be used with select tags |
match | array | Which fields of data item object should be matched against term. | ['name'] |
|
matchFirst | bool | Match term only with string's start. | false |
|
filterSame | bool | Hide already selected items. | true |
|
limit | int | Limit of shown matched data items. | 100 |
|
inputTimeout | int | Timeout (in milliseconds) between user presses key and widget starts to search suggests. | 400 |
|
select | bool | Allow select options without type term to search | false |
When using with select tag, it's always sets to true |
customValues | bool | Allow user to select value, that's not in the list of options | false |
When using with select tag, it's always sets to false |
selectPlaceholder | string | Placeholder in input, when using with select tag | 'Type to filter' |
With input tag it's used placeholder from tag |
suggestTemplate | string | HTML template for formatting suggest item. Substrings like "{{key}}" will be replaceed with data item key | '{{name}}' |
See more in example #6 |