The jquery-string-list-input from gtnx

jquery-string-list-input's Introduction

Welcome to jquery-string-list-input

jQuery widget for string list input. This is useful for input/textarea html tags that are supposed to store a list of strings where the order is important. Thus, it uses jqueryui-sortable to allow reordering of the list.

Installation

Using Bower:

bower install jquery-string-list-input

Using NPM:

npm install jquery-string-list-input

Or simply copy jquery-string-list-input.css and jquery-string-list-input.js files to your project.

Example

Basic example

    $('#textarea[data-provide="string-list-input"]').stringListInput({
    });

Custom labels

    $('#textarea[data-provide="string-list-input"]').stringListInput({
        addText: 'I want to add a text',
        labelText: 'My custom text',
        removeText: 'I want to delete this text',
    });

With suggestions

    $('#textarea[data-provide="string-list-input"]').stringListInput({
        suggestions: ['apple', 'facebook', 'google', 'amazon'],
    });

Custom events

    $('#textarea[data-provide="string-list-input"]').stringListInput({
        onUpdate: function(items) {
            alert(JSON.stringify(items));
        }
    });

Reference

Options

Option	Default	Mandatory	Description
addText	'Add'	No	Display text on Add button
cursor	'move'	No	`cursor` option for jquery-ui sortable
distance	5	No	`distance` option for jquery-ui sortable
hide	true	No	Hide original input
labelText	'Expression'	No	Display text above each generated input
opacity	.5	No	`opacity` option for jquery-ui sortable
removeText	'Delete'	No	Display text on delete buttons
suggestions	[]	No	Suggestions in each input generated. Requires jquery-textcomplete