Meta Input

Simple autocomplete on input tag with default options. We only need to set data for widget. Code snippet:

$('#example1').meta_input({data: [
    "Afganistan",
    "Albalia",
    "Austria",
    ...
]});

Autocomplete on input with "multiple" option.
Code snippet:

$('#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

Using with select tag is even more simple:

$('#example3').meta_input();

No any options required, cause data option automaticly creates from select options.

Also using with select tag has a different behaviour: suggest shows even if there's no term to search. You can have this affect on input tag to by using "select" option

Using ajax request to search data on server. This use case is simple too. All search logic should be implemented on server side. Code snippet:

$('#example2').meta_input({ajax: 'example.json'});

This code will call URL example.json?term=user_input
Server should return ajax., formatted like this:

{"data": [
  {"id": "1", "name": "Option One"},
  ...
]}

Setting value for widget with single value (using value attribute):

<input type="text" placeholder="Type to search" id="example5_1" value="Ukraine">
<script>
    $(function(){
        $('#example5_1').meta_input({data: ["USA", "Ukraine", ...]});
    });
</script>

Setting value for widget with single value object with id:

$('#example5_2').meta_input({
    data: [
        {"id": "1", "name": "Option One"},
        {"id": "2", "name": "Option Two"},
    ],
    value: {id: "1", name: "Option One"}
});

Setting value for widget with miltiple values:

$('#example5_3').meta_input({
    data: ["USA", "Ukraine", ...],
    value: ["Ukraine", "Russia"], multiple: true
});

Select options with selected attribute also work fine!

It's pretty easy to use custom templates for rendering suggest items.
You can fully specify your own html template, using for render single suggest item. For example, we want to view person's suggest list with photos and some extra information. It's doing like this:

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.