Again

Author: Serhioromano

README.md

@@ -89,7 +89,12 @@ can_delete | true | Set if current user can delete tags/pills
 can_add | true | Set if current users can add new tags
 remove_url | | Set URL where `POST` request will be sent on tag/pill removal.
 input_name | tags[] | Set name of the hidden `<input>` element to be added with every tag/pill. It should end with `[]` in order to support multiple values.
+double_hilight | #0B3549 | Color to highlight tag on double entry attempt.
 limit | 0 | Maximum amount of tags to add. 0 - no limits.
+only_suggestions | false | You can allow only add from suggestions and not add new tags/pills.
+suggestion_limit | 15 | Maximum number of suggestions for typeahead.
+suggestion_url | | Url to fetch suggestion. `POST` request will be send with `q` and `limit` parameters. `q` - search string and `limit` - how many suggestions maximum.
+suggestions | [] | Array of suggestion.
 templates | Object | Set HTML markup. This let you fully manage and style output as you want. No limitations. See [Templates](#templates) for more details. 
 
 ## Templates
@@ -106,9 +111,9 @@ You can path template through `templates` option.
 		}
 	});
 
-Template | Default | Descritpion
+Template | Default | Description
 ---|---|---
-pill | `<span class="badge badge-info" data-tag-id="{1}">{0}</span>` | This is main HTML element of the pill. This is also what will be passed to `onRemove(pill)` method. After full pill creation it will include also hidden `<input>`, number if passed and remove icon. `{0}` is the tag text, `{1}` is the tag id. `data-tag-id` is required attribute.
+pill | `<span class="badge badge-info">{0}</span>` | This is main HTML element of the pill. This is also what will be passed to `onRemove(pill)` method. After full pill creation it will include also hidden `<input>`, number if passed and remove icon. `{0}` is the tag text.
 number |  `<sup><small>{0}</small></sup>` | If `num` property exists in [feed](#feed-format) then number will be added. This is template how to format it.
 delete_icon | `<i class="icon-remove-sign"></i>` | This is delete icon. If you use FontAwesome or IcoMoon you can change it to display better icon. 
 

component.json

@@ -1,17 +1,18 @@
 {
-    "name": "bootstrap-tag-pills",
-    "version": "0.0.1",
-    "main": [
-        "./css/bootstrap-tags.css",
-        "./js/bootstrap-tags.js"
-    ],
-    "ignore": [
-        "**/.*",
-        "node_modules",
-        "components"
-    ],
-    "dependencies": {
-        "bootstrap": "~2.3.1",
-        "jquery": "~2.0.0"
-    }
+  "name": "bootstrap-tag-pills",
+  "version": "0.0.1",
+  "main": [
+    "./css/bootstrap-tags.css",
+    "./js/bootstrap-tags.js"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "components"
+  ],
+  "dependencies": {
+    "bootstrap": "~2.3.1",
+    "jquery": "~2.0.0",
+    "jquery-color": "~2.1.2"
+  }
 }

css/bootstrap-tags.css

@@ -1 +1,6 @@
-
+.add-pill {
+    cursor: pointer;
+}
+.tag-input {
+    outline: none;
+}

index.html

@@ -22,30 +22,44 @@ <h1>Bootstrap Tags Demo</h1>
 		<div class="span8">
 			<div id="bs-tags"></div>
 			<style type="text/css">
-				#bs-tags *[data-tag-id] {
+				#bs-tags .badge-tag {
 					margin-right: 5px;
+					margin-bottom: 5px;
 					font-weight: 100;
 					font-size: 14px;
 					line-height: 20px;
 				}
-				#bs-tags *[data-tag-id] a.tag-remove {
+				#bs-tags .tag-icon {
 					margin-left: 5px;
 					margin-right: -3px;
 				}
-				#bs-tags *[data-tag-id] a.tag-link {
+				#bs-tags .badge-tag a.tag-link {
 					color: #ffffff;
 					text-decoration: underline;
 				}
+				#bs-tags .tag-input {
+					border: 0 solid;
+					background-color: transparent;
+					height: 18px;
+					margin-top: -5px;
+					font-weight: 100;
+					color: #ffffff;
+				}
 			</style>
 		</div>
 	</div>
 </div>
 
 <script type="text/javascript" src="components/jquery/jquery.js"></script>
 <script type="text/javascript" src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
+<script type="text/javascript" src="components/jquery-color/jquery.color.js"></script>
 <script type="text/javascript" src="js/bootstrap-tags.js"></script>
 <script type="text/javascript">
-	$('#bs-tags').tags({values: ["Banana"], values_url: 'urls/defaults.json'});
+	$('#bs-tags').tags({
+		suggestions: ["Banana", "Durian", "Cocos"],
+		suggestion_url: "urls/suggestions.json.php",
+		values_url: 'urls/defaults.json'
+	});
 </script>
 </body>
 </html>

js/bootstrap-tags.js

@@ -7,9 +7,12 @@
         values_url: '',
 
         templates: {
-            pill: '<span class="badge badge-info" data-tag-id="{1}">{0}</span>',
-            delete_icon: '<i class="icon-remove-sign"></i>',
-            number: ' <sup><small>{0}</small></sup>'
+            pill: '<span class="badge badge-info badge-tag">{0}</span>',
+            add_pill: '<span class="badge badge-success badge-tag"></span>',
+            number: ' <sup><small>{0}</small></sup>',
+            plus_icon: '<i class="icon-plus-sign tag-icon"></i>',
+            delete_icon: '<i class="icon-remove-sign tag-icon"></i>',
+            ok_icon: '<i class="icon-ok-sign tag-icon"></i>'
         },
 
         limit: 0,
@@ -19,13 +22,21 @@
         can_delete: true,
         can_add: true,
 
+        double_hilight: '#0B3549',
+
         input_name: 'tags[]',
 
         lang: {
             delete: "Delete",
             limit: "You have reached limit of only {0} tags to be added."
         },
 
+        suggestion_limit: 15,
+        suggestion_url: '',
+        suggestions: [],
+
+        only_suggestions: false,
+
         remove_url: '',
 
         onLoadDefaults: function(values) {
@@ -38,9 +49,12 @@
         },
         onBeforeAdd: function(pill, value) {
             return pill;
+        },
+        onLoadSuggestions: function(values) {
+            return values;
         }
+    }
 
-    };
 
     function Tags(context, params) {
 
@@ -59,36 +73,166 @@
         }
         $self.options.values = $self.options.onLoadDefaults($self.options.values);
 
-        var pills_list = $(document.createElement('div')).addClass('pills-list').appendTo(context);
+        var pills_list = $(document.createElement('span')).addClass('pills-list').appendTo(context);
 
+        $self.options.values = $self._prepare($self.options.values);
         $.each($self.options.values, function(key, value) {
             $self.addTag(pills_list, value);
         });
 
-        $('[data-toggle="tooltip"]').tooltip();
+        if($self.options.can_add) {
+
+            var labels = [], mapped = [];
+
+            var input = $(document.createElement('input'))
+                .addClass('tag-input')
+                .attr({"autocomplete": "off"})
+                .css('outline', 'none')
+                .typeahead({
+                    items: $self.options.suggestion_limit,
+                    source: function(query, process) {
+
+                        var suggestions = $self.options.suggestions;
+                        labels = [];
+                        mapped = {};
+
+                        if($self.options.suggestion_url) {
+                            $.ajax({
+                                dataType: 'json', type: 'post', async: false, url: $self.options.suggestion_url,
+                                data: {q: query, limit: $self.options.suggestion_limit}
+                            }).done(function(json) {
+                                    if(typeof json == "object") {
+                                        suggestions = $.merge(suggestions, json);
+                                    }
+                                });
+                        }
+
+                        suggestions = $self.options.onLoadSuggestions(suggestions);
+                        suggestions = $self._prepare(suggestions);
+
+                        $.each(suggestions, function(i, item) {
+                            mapped[item.html] = item
+                            labels.push(item.html)
+                        });
+
+                        return labels;
+                    },
+                    updater: function(item) {
+                        $self._addTag(pills_list, input, mapped[item]);
+                    }
+                })
+                .click(function(e){
+                    e.stopPropagation();
+                });
+
+            if($self.options.only_suggestions == false) {
+                input.keyup(function(e) {
+                    if(!$(this).val()) return;
+                    if(e.keyCode == 13) {
+                        $self._addTag(pills_list, $(this));
+                    }
+                });
+            }
+
+            var add = $($self.options.templates.add_pill)
+                .append(input)
+                .append($($self.options.templates.ok_icon)
+                    .css('cursor', 'pointer')
+                    .click(function(e) {
+                        e.stopPropagation();
+                        $self._addTag(pills_list, input);
+                        input.focus();
+                    })
+                )
+                .hide()
+                .appendTo(context);
+
+            var wait = $($self.options.templates.add_pill)
+                .addClass('add-pill')
+                .css('cursor', 'pointer')
+                .html('...')
+                .append($(document.createElement('span'))
+                    .attr({})
+                    .addClass('tag-add')
+                    .append($self.options.templates.plus_icon)
+                )
+                .click(function() {
+                    add.show();
+                    input.focus();
+                    var $this = $(this);
+                    $this.hide();
+
+                    setTimeout(function() {
+                        $('body').one('click', function() {
+                            add.hide();
+                            $this.show();
+                        });
+                    }, 200);
+
+                })
+                .appendTo(context);
+        }
     }
 
+
+    Tags.prototype._prepare = function(values) {
+
+        $.each(values, function(key, value) {
+            if(!value) {
+                delete values[key];
+                return true;
+            }
+            if(typeof value == "string") {
+                values[key] = {id: value, text: value, html: value};
+            }
+            values[key].html = values[key].html || values[key].text;
+            values[key].url = value.url || '';
+            values[key].title = value.title || '';
+            values[key].num = parseInt(value.num || '0');
+        });
+        return values;
+    }
+    Tags.prototype._addTag = function(pills_list, input, value) {
+
+        if(!value) {
+            value = this._prepare([input.val()])[0];
+        }
+
+        if(this.addTag(pills_list, value)) {
+            input.val('').focus();
+        }
+    }
     Tags.prototype.addTag = function(pills_list, value) {
         var $self = this;
 
+        if(!value) return false;
+
         if(parseInt($self.options.limit) > 0 && pills_list.children().length >= parseInt($self.options.limit)) {
             $self.options.onError(10, $self.options.lang.limit.format($self.options.limit));
-            return;
-        }
-
-        if(typeof value == "string") {
-            value = {id: value, text: value, html: value};
+            return false;
         }
-        value.html = value.html || value.text;
-        value.url = value.url || '';
-        value.title = value.title || '';
-        value.num = parseInt(value.num || '0');
 
         if(!value.id || !value.text) {
             $self.options.onError(11, 'Not correct object format to create tag/pill');
             $.error('Not correct object format to create tag/pill');
         }
 
+        var unique = '';
+        $.each(pills_list.children(), function(key, val) {
+            if(value.id.toString().toLowerCase() == $(val).data('tag-id').toString().toLowerCase()) {
+                unique = $(val);
+                return false;
+            }
+        });
+
+        if(unique) {
+            var color = $(pills_list.children()[0]).css('background-color');
+            unique.stop().animate({"backgroundColor": $self.options.double_hilight}, 100, 'swing', function() {
+                unique.stop().animate({"backgroundColor": color}, 100)
+            });
+            return false;
+        }
+
         if(value.url) {
             var title = value.title ? ' data-toggle="tooltip" title="' + value.title + '"' : '';
             value.text = '<a class="tag-link" ' + title + ' target="' + $self.options.tag_link_target + '" href="' + value.url + '">' + value.text + '</a>';
@@ -111,7 +255,8 @@
 
         var num = value.num > 0 ? $self.options.templates.number.format(value.num) : '';
 
-        var tag = $($self.options.templates.pill.format(value.text, value.id))
+        var tag = $($self.options.templates.pill.format(value.text))
+            .attr('data-tag-id', value.id)
             .append(num, icon, $(document.createElement('input'))
                 .attr({
                     "data-tag-hidden": value.id,
@@ -124,6 +269,10 @@
         tag = $self.options.onBeforeAdd(tag, value);
 
         pills_list.append(tag);
+
+        $('[data-toggle="tooltip"]').tooltip();
+
+        return true;
     }
 
     Tags.prototype.removeTag = function(tag) {
@@ -154,4 +303,5 @@ if(!String.prototype.format) {
             return typeof args[number] != 'undefined' ? args[number] : match;
         });
     };
-}
+}
+;

urls/defaults.json

@@ -2,16 +2,16 @@
     {
         "id": "2",
         "text": "Apple",
-        "html": "This is <b>Apple</b>!",
+        "html": "You have found Apple",
         "num": 5,
-        "url": "http://tags/",
+        "url": "http://www.apple.com",
         "title": "Click here to see all &quot;records&quot; of only Apple's"
     },
     {
         "id": "3",
         "text": "Mango",
-        "html": "I like <b>Mango</b>!",
-        "url": "/"
+        "html": "You have found <b>Mango</b>!",
+        "url": "http://www.mango.com/"
     },
     {
         "id": "5",