Evolution #41: Sélection des tags dynamique (ajax): Seuls les tags inconus peuvent être utilisés.

src/Muzich/CoreBundle/Resources/views/Tag/tagsPrompt.html.twig

@@ -30,8 +30,9 @@
   // I've hacked the jQuery UI autocomplete render function
   // to highlight part of the matched string
   $.ui.autocomplete.prototype._renderItem = function( ul, item) {
-      var re = new RegExp("^" + this.term, "i") ;
-      var t = item.label.replace(re,"<strong>" + this.term + "</strong>");
+      var sstr = $.trim(this.term);
+      var re = new RegExp("^" + sstr, "i") ;
+      var t = item.label.replace(re,"<strong>" + sstr + "</strong>");
       return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( "<a>" + t + "</a>" )
@@ -41,7 +42,8 @@
   // The autocomplete for the last tagbox
   $("#tags_prompt_{{ form_name }} ul.tagbox li.input input").autocomplete({
       source: function(req, responseFn) {
-          var re = $.ui.autocomplete.escapeRegex(req.term);
+          var sstr = $.trim(req.term);
+          var re = $.ui.autocomplete.escapeRegex(sstr);
           var matcher = new RegExp( "^" + re, "i" );
           var a = $.grep( taglist, function(item,index){
               return matcher.test(item);

src/Muzich/CoreBundle/Resources/views/layout.html.twig

@@ -17,9 +17,9 @@
   {% block css %}{% endblock %}
 	<script src="{{ asset('js/jquery-1.6.4.min.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/jquery-ui-1.8.7.min.js') }}" type="text/javascript"></script>
+	<script src="{{ asset('bundles/muzichcore/js/muzich.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/tags/jquery.autoGrowInput.js') }}" type="text/javascript"></script>
   <script src="{{ asset('js/tags/jquery.tagBox.js') }}" type="text/javascript"></script>
-	<script src="{{ asset('bundles/muzichcore/js/muzich.js') }}" type="text/javascript"></script>
   {% block js %}{% endblock %}
   
 </head>

web/bundles/muzichcore/js/muzich.js

@@ -46,6 +46,14 @@ function findKeyWithValue(arrayt, value)
   return "";
 }
 
+if(typeof(String.prototype.trim) === "undefined")
+{
+    String.prototype.trim = function() 
+    {
+        return String(this).replace(/^\s+|\s+$/g, '');
+    };
+}
+
 
 // Tags
 

web/js/tags/jquery.tagBox.js

@@ -10,12 +10,23 @@
 *  
 */
 
+
+
 (function($) {
     
     function TagBox(input, options) {
 
         var self = this;
         
+        // Ce tableau contiendra les tags déjà ajoutés
+        if(typeof(tagsAddeds) === "undefined")
+        {
+          tagsAddeds = new Array();
+        }
+        // On permet de faire un tableau de tags ajoutés par formulaires
+        // TODO: Par 'champ' ce serais mieux.
+        tagsAddeds[options.form_name] = new Array();
+        
         self.options = options
         self.delimit_key = 188
         self.delimit_expr = /\s*,\s*/
@@ -80,39 +91,46 @@
               self.addTag(values[tagid], tagid, options.form_name);
           }
         }
+        
     }
     
     TagBox.prototype = {
         
         addTag : function(label, id, form_name) {
             
-            var self = this;
-            var tag = $('<li class="tag">' + $('<div>').text(label).remove().html() + '</li>');
-            
-            this.tags.push(label);
+            // Nos conditions pour ajouter le tag:
+            // * N'a pas déjà été ajouté a ce champ
+            // * Est dans la liste des tags existants
+            if (id && !findKeyWithValue(tagsAddeds[form_name], id))
+            {
+              var self = this;
+              var tag = $('<li class="tag">' + $('<div>').text(label).remove().html() + '</li>');
 
-            tag.append($('<a>', {
-                "href" : "#",
-                "class": "close",
-                "text": "close",
-                click: function(e) {
-                    e.preventDefault();
-                    var index = self.tagbox.find("li").index($(this).parent());
-                    self.removeTag(index);
-                }
-            })).append($('<input>', {
-              'type'   : 'checkbox',
-              'style'  : 'display: none;',
-              'value'  : id,
-              'name'   : form_name+'[tags]['+id+']',
-              'id'     : form_name+'_tags_'+id,
-              'checked': 'checked'
-            }));
-            
-            // <input type="checkbox" value="6373" name="group[tags][6373]" id="group_tags_6373">
+              this.tags.push(label);
+
+              tag.append($('<a>', {
+                  "href" : "#",
+                  "class": "close",
+                  "text": "close",
+                  click: function(e) {
+                      e.preventDefault();
+                      var index = self.tagbox.find("li").index($(this).parent());
+                      self.removeTag(index);
+                  }
+              })).append($('<input>', {
+                'type'   : 'checkbox',
+                'style'  : 'display: none;',
+                'value'  : id,
+                'name'   : form_name+'[tags]['+id+']',
+                'id'     : form_name+'_tags_'+id,
+                'checked': 'checked'
+              }));
+              
+              tagsAddeds[form_name][id] = id;
+              self.inputHolder.before(tag);
+              self.updateInput();
+            }
             
-            self.inputHolder.before(tag);
-            self.updateInput();
         },
         removeTag : function(index) {