Skip to content

Latest commit

 

History

History
86 lines (70 loc) · 2.27 KB

README.md

File metadata and controls

86 lines (70 loc) · 2.27 KB
Raw

superbly tagfield

description

this is a delicious like tag field which allows to add and delete tags to an input form field.

  • allows new tags or only tags from array
  • allow only a certain amount of tags
  • can set preset tags
  • adding tags by mouse or by keyboard input
  • doesn’t allow duplicated entries
  • input field acts like a normal input field

demo

http://www.superbly.ch/examples/tagfield

installation

  • add resources to your page:
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="superbly-tagfield.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="superbly-tagfield.css">

usage

  • add an input field
  • add tagfield support to the input field

example:

<script type="text/javascript">
    $(function() {
        $("#tagfield1").superblyTagField({
                allowNewTags: false,
                showTagsNumber: 10,
                preset: ['Audi','Bentley'],
                tags: ['Alfa Romeo','Aston Martin','Audi','Bentley','Bugatti']
        });
    });
</script>
...
<input type="text" id="tagfield1" />

options

  • allowNewTags: true or false (default true)
  • addItemOnBlur: true or false (default false)
  • caseSensitive: true or false (default true)
  • allowTagsNumber: number of allowed tags (default infinite)
  • showTagsNumber: number of shown suggestions tags (default 10)
  • preset: array of preset tags
  • tags: array of tags
  • onRemove: a function that runs before a tag is removed and discontinues with removal if the return value is false

changelog

version 0.1

  • removed the car list from the minified version
  • moved the project to github

version 0.2

  • fixed bug found by noah

version 0.3 (thanks to waf)

  • refactor into jquery extension
  • make tag input dynamically resize to fix wrapping

version 0.4 (thanks romeroadrian)

  • add items by tab

version 0.5

  • add allowed tags number attribute

version 0.6

  • add case sensitive attribute