www.ThimbleOpenSource.com

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