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.

Source on GitHub    Live demo & docs    Download .zip (v0.1.2)

1. Simple autocomplete

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",
    ...
]});

2. Multiple choose

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

3. Using with <select>

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

4. Ajax search

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"},
  ...
]}


5. Setting value

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!

6. Customize suggest

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.

7. Options

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

Back to top

Shared with MIT Licence