Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' of github.com:baio/tag-it

Conflicts:
	my_example.html
  • Loading branch information...
commit 00b51ac8d36e008b6df1167b2f437e903260d27c 2 parents a184c50 + d989982
@baio authored
View
48 key-value/my_example.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+ <title></title>
+ <!-- These 2 CSS files are required: any 1 jQuery UI theme CSS, plus the Tag-it base CSS. -->
+ <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
+ <link rel="stylesheet" type="text/css" href="../css/jquery.tagit.css">
+
+ <!-- This is an optional CSS theme that only applies to this widget. Use it in addition to the jQuery UI theme. -->
+ <link href="../css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
+
+ <!-- jQuery and jQuery UI are required dependencies. -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript" charset="utf-8"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
+
+ <!-- The real deal -->
+ <script src="../js/tag-it.js" type="text/javascript" charset="utf-8"></script>
+
+ <script src="my_example.js" type="text/javascript"></script>
+
+ <script>
+ </script>
+</head>
+<body>
+<form>
+ <p>
+ If you instantiate Tag-it on an INPUT element, it will default to being singleField, with that INPUT element as the singleFieldNode. This is the simplest way to have a gracefully-degrading tag widget.
+ </p>
+ Static list (available tags)<br/>
+ <input name="tags" id="listTagField" value="Apple, Orange" style="width: 300px">
+ <input name="tags" id="listTagFieldVlues" readonly>
+ <br/><br/>Ajax<br/>
+ <input name="tags" id="ajaxTagField" value="Apple, Orange" style="width: 300px">
+ <input name="tags" id="ajaxTagFieldVlues" readonly>
+ </form>
+<script type="text/javascript">
+ var sampleTags = [{key : 0, value : 'c++'}, {key : 1, label : 'java'} , {key : 2, value : 'php', label : 'php [2]'} , 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
+
+ $('#listTagField').tagit({
+ availableTags: sampleTags,
+ animate : false,
+ valuesNode : $("#listTagFieldVlues")});
+
+
+</script>
+</body>
+</html>
View
168 key-value/my_example.js
@@ -0,0 +1,168 @@
+
+$(document).ready(function(){
+ create_it_list();
+ create_it_ajax();
+});
+
+//Example:
+/*
+The original implementation of the tagit widget suppose that label is only string, this example shows how it could bw done
+if tag has these 3 fileds : Key, Value, Label.
+Value - string which corresponds tag and which is shown in widget when user enter or select some item from the list.
+Label - string which is shown in drop-down list of widget's autocomplete
+Key - the key of the tag (usually number)
+ */
+
+
+function tagItGetItems(array)
+{
+ return $.map(array, function(element) {
+ var key = typeof element.key != 'undefined' ? element.key : -1;
+ var val = typeof element.value != 'undefined' ? element.value :
+ (typeof element.label != 'undefined' ? element.label : element);
+ var label = typeof element.label != 'undefined' ? element.label : val;
+ return {value : val, label : label, key : key};
+ });
+}
+
+function tagItGetKey($tagit, tag)
+{
+ var vn = $tagit.options.valuesNode;
+ if (vn){
+ var value = $(":first", tag).text();
+ var item = $.grep(getTagItTags($tagit.options.availableTags), function(element){
+ return element.value == value;
+ });
+
+ return item.length > 0 ? item[0].key : -1;
+ }
+}
+
+function tagItExpellExistent(items, existent)
+{
+ return $.grep(items, function(e) {return $.inArray(existent, e.value);});
+}
+
+//Example for the static list, each list item could be represented either object which has 3 fields - key, name, label either
+//just string in which case object will be created by default with {key : -1, name : [item], label : [item]}
+//options :
+//valuesNode - html element where key values of the tags will be stored
+function create_it_list()
+{
+ var sampleTags = [{key : 0, value : 'c++'}, {key : 1, label : 'java'} , {key : 2, value : 'php', label : 'php [2]'} , 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
+
+ $('#listTagField').tagit({
+ availableTags: sampleTags,
+ animate : false,
+ valuesNode : $("#listTagFieldVlues"),
+ tagSource : function(search, showChoices)
+ {
+ var that = (this.element).data("tagit");
+ var filter = search.term.toLowerCase();
+ var choices = tagItGetItems(that.options.availableTags);
+ choices = $.grep(choices, function(element) {
+ // Only match autocomplete options that begin with the search term.
+ // (Case insensitive.)
+ return (element.value.toLowerCase().indexOf(filter) === 0);
+ });
+
+ showChoices(tagItExpellExistent(choices, that.assignedTags()));
+ },
+ onTagAdded: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var value = $(":first", tag).text();
+ var item = $.grep(tagItGetItems(that.options.availableTags), function(element){
+ return element.value == value;
+ });
+
+ var key = item.length > 0 ? item[0].key : -1;
+
+ vn.val((vn.val() ? vn.val() + "," : "") + key);
+ }
+ },
+
+ onTagRemoved: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var val = $(":first", tag).text();
+ var values = $(this).val().split(',');
+ var i = values.indexOf(val);
+ var keys = vn.val().split(',');
+ keys.splice(i, 1);
+ vn.val(keys.join(','));
+ }
+
+ }
+ });
+}
+
+//Example for the ajax list, all the same as above, only tag source is ajax function which return list of the items from the server.
+//These items should be parsed in [success] method and then displayed through [showChoices] callback
+function create_it_ajax()
+{
+ $('#ajaxTagField').tagit({
+
+ animate : false,
+ valuesNode : $("#ajaxTagFieldVlues"),
+ tagSource : function(search, showChoices)
+ {
+ var that = (this.element).data("tagit");
+
+ $.ajax({
+ url: "http://localhost:53765/DataService.svc/Items?$select=Id,Name,Label&$format=json",
+ dataType: "json",
+ data: { $filter: "startswith(Name,'" + search.term + "')" },
+ success: function(data) {
+ var choices = $.map(data.d, function(element)
+ {return {
+ value : element.Name,
+ label : element.Label,
+ key : element.Id }});
+
+ that.options.availableTags = choices;
+
+ showChoices(tagItExpellExistent(choices, that.assignedTags()));
+ }
+ });
+ },
+ onTagAdded: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var value = $(":first", tag).text();
+ var item = $.grep(tagItGetItems(that.options.availableTags), function(element){
+ return element.value == value;
+ });
+
+ var key = item.length > 0 ? item[0].key : -1;
+
+ vn.val((vn.val() ? vn.val() + "," : "") + key);
+ }
+ },
+
+ onTagRemoved: function(event, tag) {
+
+ var that = tag.data("tagit");
+ var vn = that.options.valuesNode;
+
+ if (vn){
+ var val = $(":first", tag).text();
+ var values = $(this).val().split(',');
+ var i = values.indexOf(val);
+ var keys = vn.val().split(',');
+ keys.splice(i, 1);
+ vn.val(keys.join(','));
+ }
+
+ }
+ });
+}
View
78 key-value/tag-it-kv.coffee
@@ -0,0 +1,78 @@
+###
+plugin for tag-it widget.
+could handle cases when tag is not just a string but item which following fields:
+Key, Name, Value
+Value - string which represents a text of the tag and which is shown in widget when user enter or select some item from the list.
+Label - string which is shown in drop-down list of widget's autocomplete
+Key - the key of the tag (usually number)
+###
+
+($)->
+ $.widget 'ui.tagitkv',
+
+ options :
+ #tag it widget
+ tagIt : null
+ #html element where key values of the tags will be stored
+ valuesNode : null
+
+ origOtions :
+
+ tagSource : null
+
+ onTagAdded : null
+
+ onTagRemoved : null
+
+ _create: ->
+
+ @origOptions.onTagAdded = @options.tagIt.options.onTagAdded
+ @origOptions.onTagRemoved = @options.tagIt.options.onTagRemoved
+
+ @options.tagIt.options.onTagAdded = @_onTagAdded
+ @options.tagIt.options.onTagRemoved = @_onTagRemoved
+
+ _tagSource: (search, showChoices) ->
+ that = this.element.data "tagit"
+ filter = search.term.toLowerCase()
+ choices = @_getItems that.options.availableTags
+ choices = $.grep choices, (element) ->
+ element.value.toLowerCase().indexOf filter == 0
+ showChoices @_expellExistent choices, that.assignedTags()
+
+ _onTagAdded: (event, tag) ->
+
+ that = @options.tagit
+ vn = @options.valuesNode
+
+ if (vn)
+ value = $(":first", tag).text();
+ item = $.grep @_getItems(that.options.availableTags), (element)-> element.value == value
+ key = if item.length > 0 then item[0].key else -1
+ vn.val "#{if vn.val() then vn.val() + "," else ""}#{key}"
+
+ _onTagRemoved: (event, tag) ->
+
+ that = @options.tagit
+ vn = @options.valuesNode
+
+ if (vn)
+ val = $(":first", tag).text()
+ values = $(this).val().split ','
+ i = values.indexOf val
+ keys = vn.val().split ','
+ keys.splice i, 1
+ vn.val keys.join ','
+
+ _getItems: (array) ->
+ $.map array, element ->
+ key = element.key
+ key ?= -1
+ val = element.value
+ val ?= element.label
+ label = element.label
+ label ?= val
+ value : val, label : label, key : key
+
+ _expellExistent: (items, existent) ->
+ $.grep items, (element) -> $.inArray existent, element.value
View
146 my_example.html
@@ -1,146 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
- <title></title>
- <!-- These 2 CSS files are required: any 1 jQuery UI theme CSS, plus the Tag-it base CSS. -->
- <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
- <link rel="stylesheet" type="text/css" href="css/jquery.tagit.css">
-
- <!-- This is an optional CSS theme that only applies to this widget. Use it in addition to the jQuery UI theme. -->
- <link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
-
- <!-- jQuery and jQuery UI are required dependencies. -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript" charset="utf-8"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
-
- <!-- The real deal -->
- <script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
-
- <script>
-
- function getTagItTags(array)
- {
- return $.map(array, function(element) {
- var key = typeof element.key != 'undefined' ? element.key : -1;
- var val = typeof element.value != 'undefined' ? element.value :
- (typeof element.label != 'undefined' ? element.label : element);
- var label = typeof element.label != 'undefined' ? element.label : val;
- return {value : val, label : label, key : key};
- });
- }
-
- function getTagKey($tagit, tag)
- {
- var vn = $tagit.options.valuesNode;
- if (vn){
- var value = $(":first", tag).text();
- var item = $.grep(getTagItTags($tagit.options.availableTags), function(element){
- return element.value == value;
- });
-
- return item.length > 0 ? item[0].key : -1;
- }
- }
-
- function tagitExpellExistent(items, existent)
- {
- return $.grep(items, function(e) {return $.inArray(existent, e.value);});
- }
-
- function create_it()
- {
- var sampleTags = [{key : 0, value : 'c++'}, {key : 1, label : 'java'} , {key : 2, value : 'php', label : 'php [2]'} , 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
-
- $('#tagField').tagit({
-
- maxChars : 5,
- maxCount : 3,
- allowNotInList: true,
- availableTags: sampleTags,
- animate : false,
- valuesNode : $("#tagFieldVlues"),
- tagSource : function(search, showChoices)
- {
- var that = (this.element).data("tagit");
- var filter = search.term.toLowerCase();
- var choices = getTagItTags(that.options.availableTags);
- choices = $.grep(choices, function(element) {
- // Only match autocomplete options that begin with the search term.
- // (Case insensitive.)
- return (element.value.toLowerCase().indexOf(filter) === 0);
- });
-
- showChoices(tagitExpellExistent(choices, that.assignedTags()));
- },
- onMaxChars: function(widget, input)
- {
- console.log("onMaxChars");
- },
- onMaxCount: function()
- {
- console.log("onMaxCount");
- },
- onNotAllowed: function()
- {
- console.log("onNotAllowed");
- },
-
- onTagAdded: function(event, tag) {
-
- var that = tag.data("tagit");
- var vn = that.options.valuesNode;
-
- if (vn){
- var value = $(":first", tag).text();
- var item = $.grep(getTagItTags(that.options.availableTags), function(element){
- return element.value == value;
- });
-
- var key = item.length > 0 ? item[0].key : -1;
-
- vn.val((vn.val() ? vn.val() + "," : "") + key);
- }
- },
-
- onTagRemoved: function(event, tag) {
-
- var that = tag.data("tagit");
- var vn = that.options.valuesNode;
-
- if (vn){
- var val = $(":first", tag).text();
- var values = $(this).val().split(',');
- var i = values.indexOf(val);
- var keys = vn.val().split(',');
- keys.splice(i, 1);
- vn.val(keys.join(','));
- }
-
- }
- });
- }
-
- function destroy_it()
- {
- $("#tagField").tagit("destroy");
- }
-
- $(document).ready(function(){
- create_it();
- });
- </script>
-</head>
-<body>
-<form>
- <p>
- If you instantiate Tag-it on an INPUT element, it will default to being singleField, with that INPUT element as the singleFieldNode. This is the simplest way to have a gracefully-degrading tag widget.
- </p>
- <input name="tags" id="tagField" value="Apple, Orange" style="width: 300px">
- <input name="tags" id="tagFieldVlues" readonly>
-
- </form>
-<button onclick='destroy_it();'>destroy it!</button>
-<button onclick='create_it();'>create it!</button>
-</body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.