Merge branch 'B10117TypeAheadAfterSaveJSONIsShown' into F9517TagInput

javascript/src/ElementUpdate.js

@@ -79,6 +79,7 @@ var QfqNS = QfqNS || {};
         $element.attr(attributeName, attributeValue);
         if (attributeName.toLowerCase() === "value") {
             $element.val(attributeValue);
+            $element.trigger('qfqChange');
         }
     };
 

javascript/src/TypeAhead.js

@@ -62,9 +62,16 @@ var QfqNS = QfqNS || {};
         var suggestions = new Bloodhound(bloodhoundConfiguration);
         suggestions.initialize();
 
+        // create actual input field
+        var $inputField = $('<input/>', {
+            type: 'text',
+            class: $element.attr('class')
+        });
+        $element.after($inputField);
+
         // prevent form submit when enter key is pressed
-        $element.off('keyup');
-        $element.on('keypress keyup', function (e) {
+        $inputField.off('keyup');
+        $inputField.on('keypress keyup', function (e) {
             var code = e.keyCode || e.which;
             if (code === 13) {
                 e.preventDefault();
@@ -91,9 +98,9 @@ var QfqNS = QfqNS || {};
         };
 
         // initialize tagsManager
-        var tagApi = $element.tagsManager({
+        var tagApi = $inputField.tagsManager({
             deleteTagsOnBackspace: false,
-            hiddenTagListName: $element.attr('name'),
+            hiddenTagListName: '',
             tagClass: 'qfq-typeahead-tag',
             delimiters: delimiters,
             validator: !!$element.data('typeahead-pedantic') ? pedanticValidator : null,
@@ -110,13 +117,21 @@ var QfqNS = QfqNS || {};
         });
 
         // when the hidden input field changes, overwrite value with tag object list
-        tagApi.bind('tm:hiddenUpdate', function (e, tags, hiddenInput) {
+        tagApi.bind('tm:hiddenUpdate', function (e, tags) {
             var tagObjects = $.map(tags, function (t) {
                 return existingTags.filter(function (tt) {return tt.value === t;})[0];
             });
-            hiddenInput.val(JSON.stringify(tagObjects));
+            $element.val(JSON.stringify(tagObjects));
+        });
+
+        // if value of hidden field is changed externally, update tagManager
+        $element.on('qfqChange', function () {
+           existingTags = $element.val() !== '' ? JSON.parse($element.val()) : [];
+           tagApi.tagsManager('empty');
+           $.each(existingTags, function (i, tag) {
+               tagApi.tagsManager('pushTag', tag.value);
+           });
         });
-        $element.removeAttr('name');
 
         // add existing tags
         $.each(existingTags, function (i, tag) {
@@ -124,7 +139,7 @@ var QfqNS = QfqNS || {};
         });
 
         // add typahead
-        $element.typeahead({
+        $inputField.typeahead({
                 // options
                 hint: n.TypeAhead.getHint($element),
                 highlight: n.TypeAhead.getHighlight($element),
@@ -140,20 +155,20 @@ var QfqNS = QfqNS || {};
                     // No message if field is not set to pedantic.
                     notFound: (function ($_) {
                         return function (obj) {
-                            if (!!$_.data('typeahead-pedantic'))
+                            if (!!$element.data('typeahead-pedantic'))
                                 return "<div>'" + n.TypeAhead.htmlEncode(obj.query) + "' not found";
                         };
-                    })($element)
+                    })($inputField)
             }
         });
 
         // directly add tag when clicked on in typahead menu
-        $element.bind('typeahead:selected', function (event, sugg) {
+        $inputField.bind('typeahead:selected', function (event, sugg) {
             tagApi.tagsManager("pushTag", sugg.value);
         });
 
         // update typahead list when typahead changes
-        $element.bind('typeahead:render', function (event, sugg) {
+        $inputField.bind('typeahead:render', function (event, sugg) {
             typeaheadList.length = 0;
             typeaheadList.push.apply(typeaheadList, sugg);
         });

mockup/typeahead.php

@@ -141,7 +141,7 @@
             </div>
 
             <div class="col-md-6">
-                <input id="tags1" type="text" class="form-control qfq-typeahead" name="tags1"
+                <input id="tags1" type="hidden" class="form-control qfq-typeahead" name="tags1"
                        data-typeahead-sip="abcdef"
                        data-typeahead-limit="10"
                        data-typeahead-minlength="1"
@@ -160,7 +160,7 @@
             </div>
 
             <div class="col-md-6">
-                <input id="tags2" type="text" class="form-control qfq-typeahead" name="tags2"
+                <input id="tags2" type="hidden" class="form-control qfq-typeahead" name="tags2"
                        data-typeahead-sip="abcdef"
                        data-typeahead-limit="10"
                        data-typeahead-minlength="1"