Skip to content
This repository was archived by the owner on Aug 15, 2019. It is now read-only.

add color code block for readme #304

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add color code block for readme #304

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 53 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,52 +20,71 @@ Created by [XOXCO](http://xoxco.com)

First, add the Javascript and CSS files to your <head> tag:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
```html
<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
```

Create a real input in your form that will contain a comma-separated list of
tags. You can put any default or existing tags in the value attribute, and
they'll be handled properly.

<input name="tags" id="tags" value="foo,bar,baz" />
```html
<input name="tags" id="tags" value="foo,bar,baz" />
```

Then, simply call the tagsInput function on any field that should be treated as
a list of tags.

$('#tags').tagsInput();
```js
$('#tags').tagsInput();
```

If you want to use jQuery.autocomplete, you can pass in a parameter with the
autocomplete url.

$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
```js
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete'
});
```

If you're using the bassistance jQuery.autocomplete, which takes extra
parameters, you can also send in options to the autocomplete plugin, as
described here.

$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});
```js
$('#tags').tagsInput({
autocomplete_url:'http://myserver.com/api/autocomplete',
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});
```

You can add and remove tags by calling the addTag() and removeTag() functions.

$('#tags').addTag('foo');
$('#tags').removeTag('bar');
```js
$('#tags').addTag('foo');
$('#tags').removeTag('bar');
```

You can import a list of tags using the importTags() function...

$('#tags').importTags('foo,bar,baz');

```js
$('#tags').importTags('foo,bar,baz');
```

You can also use importTags() to reset the tag list...

$('#tags').importTags('');
```js
$('#tags').importTags('');
```

And you can check if a tag exists using tagExist()...

if ($('#tags').tagExist('foo')) { ... }
```js
if ($('#tags').tagExist('foo')) { ... }
```

If additional functionality is required when a tag is added or removed, you may
specify callback functions via the onAddTag and onRemoveTag parameters. Both
Expand All @@ -85,19 +104,21 @@ option to false.

## Options

$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
'onAddTag':callback_function,
'onRemoveTag':callback_function,
'onChange' : callback_function,
'delimiter': [',',';'], // Or a string with a single delimiter. Ex: ';'
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0, // if not provided there is no limit
'placeholderColor' : '#666666'
});
```js
$(selector).tagsInput({
'autocomplete_url': url_to_autocomplete_api,
'autocomplete': { option: value, option: value},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
'onAddTag':callback_function,
'onRemoveTag':callback_function,
'onChange' : callback_function,
'delimiter': [',',';'], // Or a string with a single delimiter. Ex: ';'
'removeWithBackspace' : true,
'minChars' : 0,
'maxChars' : 0, // if not provided there is no limit
'placeholderColor' : '#666666'
});
```