Multi Ajax Input
I was looking for plugin like jQuery UI Autocomplete with possibility for multiple values that can be both from AJAX and custom entered in input. However I didn't find any, so I wrote Multi-Ajax-Input for jQuery.
So this plugin is actually simple input field, which can have multiple values. The input field uses AJAX to auto-suggest values in database, user can pick a suggested item or he/she can type-in custom new value. Selected values below input field are sortable and they can be deleted on the fly.
Requirements
jQuery 1.4, jQuery UI 1.6 with Autocomplete and Sortable
Configuration
$('#id_of_form_text_input').multi_ajax_input(options);
Parameter options is directly passed to jQuery UI Autocomplete, so anything you want to configure, put it in this object. There are also some Multi-Ajax-Input specific options, see below:
var options = {
// optional - id of a button user can click to add entered value ( they can always use ENTER key to do this, that's why this is optional )
add_button : false,
// optional - id of the <ul> which will be used to store values
input_values_list : '#input_values_list',
// optional - message to be asked when user tries to delete value from the list
message_delete : 'Are you sure to delete this item ?',
};
Usage example
Below is HTML, JS and PHP code used for demo, which can you try yourself below.
Javascript
$('#input').multi_ajax_input({
add_button:'#add_button',
source: "/ajax.php",
input_values_list: "#values_list",
delay:150,minLength: 3}
);
HTML
<form method="post" action="?">
<input type="text" id="input" input_name="multi_values" value="" />
<input type="button" id="add_button" value="Add" />
<input type="submit" value="Submit" />
<ul id="values_list"></ul>
</form>
PHP
This is example of how you can parse the result into PHP array, which will be indexed by the order the user has sorted. The resulting array will contain id and text value of the item. If the id is 0 (zero), then it is a new custom value added by user, otherwise it is an id supplied in AJAX.
if (!empty($_POST['multi_ajax_input'])) {
$result = array();
foreach ($_POST['multi_ajax_input'] as $i => $value) {
$result[$i] = array(explode('::', $value));
}
}
Demo
Try to type a name of your favourite programming language in the box below ( e.g. Java, Javascript, ... ).
Download
Zip version (4 kB)
Changelog
October 6, 2011 - released 1.0