MDL-51970 autocomplete: Add an option to hide the suggestions

This is used by tags when official tags are disabled.

lib/amd/src/form-autocomplete.js

@@ -522,6 +522,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      * @param {String} ajax Name of an AMD module to handle ajax requests. If specified, the AMD
      *                      module must expose 2 functions "transport" and "processResults".
      * @param {Boolean} caseSensitive - If search has to be made case sensitive.
+     * @param {Boolean} showSuggestions - Auto complete suggestions can be disabled completely.
      */
     var addNavigation = function(inputId,
                                  suggestionsId,
@@ -532,7 +533,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                                  tags,
                                  selector,
                                  ajax,
-                                 caseSensitive) {
+                                 caseSensitive,
+                                 showSuggestions) {
         // Start with the input element.
         var inputElement = $(document.getElementById(inputId));
         // Add keyboard nav with keydown.
@@ -540,7 +542,10 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             switch (e.keyCode) {
                 case KEYS.DOWN:
                     // If the suggestion list is open, move to the next item.
-                    if (inputElement.attr('aria-expanded') === "true") {
+                    if (!showSuggestions) {
+                        // Do not consume this event.
+                        return true;
+                    } else if (inputElement.attr('aria-expanded') === "true") {
                         activateNextItem(inputId, suggestionsId);
                     } else {
                         // Handle ajax population of suggestions.
@@ -630,16 +635,18 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 }
             }, 500);
         });
-        var arrowElement = $(document.getElementById(downArrowId));
-        arrowElement.on('click', function() {
-            // Prevent the close timer, or we will open, then close the suggestions.
-            inputElement.focus();
-            if (closeSuggestionsTimer) {
-                window.clearTimeout(closeSuggestionsTimer);
-            }
-            // Show the suggestions list.
-            updateSuggestions(inputElement.val(), inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
-        });
+        if (showSuggestions) {
+            var arrowElement = $(document.getElementById(downArrowId));
+            arrowElement.on('click', function() {
+                // Prevent the close timer, or we will open, then close the suggestions.
+                inputElement.focus();
+                if (closeSuggestionsTimer) {
+                    window.clearTimeout(closeSuggestionsTimer);
+                }
+                // Show the suggestions list.
+                updateSuggestions(inputElement.val(), inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
+            });
+        }
 
         var suggestionsElement = $(document.getElementById(suggestionsId));
         suggestionsElement.parent().on('click', '[role=option]', function(e) {
@@ -691,20 +698,22 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             return true;
         });
         // Whenever the input field changes, update the suggestion list.
-        inputElement.on('input', function(e) {
-            var query = $(e.currentTarget).val();
-            var last = $(e.currentTarget).data('last-value');
-            if (typeof last === 'undefined') {
-                last = query;
-            }
-            // IE11 fires many more input events than required - even when the value has not changed.
-            // We need to only do this for real value changed events or the suggestions will be
-            // unclickable on IE11 (because they will be rebuilt before the click event fires).
-            if (last != query) {
-                updateSuggestions(query, inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
-                $(e.currentTarget).data('last-value', query);
-            }
-        });
+        if (showSuggestions) {
+            inputElement.on('input', function(e) {
+                var query = $(e.currentTarget).val();
+                var last = $(e.currentTarget).data('last-value');
+                if (typeof last === 'undefined') {
+                    last = query;
+                }
+                // IE11 fires many more input events than required - even when the value has not changed.
+                // We need to only do this for real value changed events or the suggestions will be
+                // unclickable on IE11 (because they will be rebuilt before the click event fires).
+                if (last != query) {
+                    updateSuggestions(query, inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
+                    $(e.currentTarget).data('last-value', query);
+                }
+            });
+        }
     };
 
     return /** @alias module:core/form-autocomplete */ {
@@ -721,7 +730,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
          * @param {String} placeholder - The text to display before a selection is made.
          * @param {Boolean} caseSensitive - If search has to be made case sensitive.
          */
-        enhance: function(selector, tags, ajax, placeholder, caseSensitive) {
+        enhance: function(selector, tags, ajax, placeholder, caseSensitive, showSuggestions) {
             // Set some default values.
             if (typeof tags === "undefined") {
                 tags = false;
@@ -732,6 +741,9 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             if (typeof caseSensitive === "undefined") {
                 caseSensitive = false;
             }
+            if (typeof showSuggestions === "undefined") {
+                showSuggestions = true;
+            }
 
             // Look for the select element.
             var originalSelect = $(selector);
@@ -766,7 +778,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                   suggestionsId: suggestionsId,
                   selectionId: selectionId,
                   placeholder: placeholder,
-                  multiple: multiple }
+                  multiple: multiple,
+                  showSuggestions: showSuggestions }
             );
             var renderDatalist = templates.render(
                 'core/form_autocomplete_suggestions',
@@ -794,7 +807,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                     tags,
                     selector,
                     ajax,
-                    caseSensitive);
+                    caseSensitive,
+                    showSuggestions);
 
                 var inputElement = $(document.getElementById(inputId));
                 var suggestionsElement = $(document.getElementById(suggestionsId));

lib/form/autocomplete.php

@@ -48,6 +48,8 @@ class MoodleQuickForm_autocomplete extends MoodleQuickForm_select {
     protected $placeholder = '';
     /** @var bool $casesensitive Whether the search has to be case-sensitive. */
     protected $casesensitive = false;
+    /** @var bool $showsuggestions Show suggestions by default - but this can be turned off. */
+    protected $showsuggestions = true;
 
     /**
      * constructor
@@ -68,6 +70,10 @@ class MoodleQuickForm_autocomplete extends MoodleQuickForm_select {
             $this->tags = $attributes['tags'];
             unset($attributes['tags']);
         }
+        if (isset($attributes['showsuggestions'])) {
+            $this->showsuggestions = $attributes['showsuggestions'];
+            unset($attributes['showsuggestions']);
+        }
         $this->placeholder = get_string('search');
         if (isset($attributes['placeholder'])) {
             $this->placeholder = $attributes['placeholder'];
@@ -98,7 +104,7 @@ class MoodleQuickForm_autocomplete extends MoodleQuickForm_select {
         $this->_generateId();
         $id = $this->getAttribute('id');
         $PAGE->requires->js_call_amd('core/form-autocomplete', 'enhance', $params = array('#' . $id, $this->tags, $this->ajax,
-            $this->placeholder, $this->casesensitive));
+            $this->placeholder, $this->casesensitive, $this->showsuggestions));
 
         return parent::toHTML();
     }

lib/form/tags.php

@@ -90,6 +90,7 @@ class MoodleQuickForm_tags extends MoodleQuickForm_autocomplete {
         }
         $attributes['multiple'] = 'multiple';
         $attributes['placeholder'] = get_string('entertags', 'tag');
+        $attributes['showsuggestions'] = $this->showingofficial;
 
         parent::MoodleQuickForm_autocomplete($elementName, $elementLabel, $validoptions, $attributes);
     }

lib/templates/form_autocomplete_input.mustache

@@ -35,4 +35,9 @@
     Example context (json):
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
+{{#showSuggestions}}
 <input type="text" id="{{inputId}}" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}"/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
+{{/showSuggestions}}
+{{^showSuggestions}}
+<input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
+{{/showSuggestions}}