From 97d2ea7f877c59fcbd72310579f8f5bda6eee573 Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Fri, 30 Oct 2015 13:04:55 +0800
Subject: [PATCH 1/2] MDL-51970 autocomplete: Add an option to hide the
 suggestions

This is used by tags when official tags are disabled.
---
 lib/amd/build/form-autocomplete.min.js        |  2 +-
 lib/amd/src/form-autocomplete.js              | 72 +++++++++++--------
 lib/form/autocomplete.php                     |  8 ++-
 lib/form/tags.php                             |  1 +
 .../form_autocomplete_input.mustache          |  5 ++
 5 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
index c3b3a5ff12b..22d47c943c6 100644
--- a/lib/amd/build/form-autocomplete.min.js
+++ b/lib/amd/build/form-autocomplete.min.js
@@ -1 +1 @@
-define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e,f){var g=a(d).attr("data-value");f&&e.children("option").each(function(b,c){a(c).attr("value")==g&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),r(c,b,e,f)},j=function(b,c,d){var e=a(document.getElementById(c)),f=a(document.getElementById(d)),g=f.children("[aria-hidden=false]").length;for(b%=g;0>b;)b+=g;var h=a(f.children("[aria-hidden=false]").get(b)),i=a(f.children("[role=option]")).index(h),j=d+"-"+i;f.children().attr("aria-selected",!1).attr("id",""),h.attr("aria-selected",!0).attr("id",j),e.attr("aria-activedescendant",j);var k=h.offset().top-f.offset().top+f.scrollTop()-f.height()/2;f.animate({scrollTop:k},100)},k=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f+1,b,c)},l=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f-1,b,c)},o=function(b,c,d){var e=a(document.getElementById(b)),f=a(document.getElementById(c));e.attr("aria-expanded",!1).attr("aria-activedescendant",d),f.hide().attr("aria-hidden",!0)},p=function(b,f,g,h,i,k,l){var m=a(document.getElementById(f)),n=a(document.getElementById(g)),o=!1,p=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(p[p.length]={label:c.innerHTML,value:a(c).attr("value")})});var q=l?b:b.toLocaleLowerCase();d.render("core/form_autocomplete_suggestions",{inputId:f,suggestionsId:g,options:p,multiple:i}).done(function(b){n.replaceWith(b),n=a(document.getElementById(g)),n.show().attr("aria-hidden",!1),n.children().each(function(b,c){c=a(c),l&&c.text().indexOf(q)>-1||!l&&c.text().toLocaleLowerCase().indexOf(q)>-1?(c.show().attr("aria-hidden",!1),o=!0):c.hide().attr("aria-hidden",!0)}),m.attr("aria-expanded",!0),o?k||j(0,f,g):c.get_string("nosuggestions","form").done(function(a){n.html(a)})}).fail(e.exception)},q=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=g.val(),i=h.split(","),j=!1;a.each(i,function(b,c){if(c=c.trim(),""!==c&&(e||f.children("option").prop("selected",!1),f.children("option").each(function(b,d){a(d).attr("value")==c&&(j=!0,a(d).prop("selected",!0))}),!j)){var d=a("<option>");d.append(c),d.attr("value",c),f.append(d),d.prop("selected",!0),d.attr("data-iscustom",!0)}}),r(d,b,f,e),g.val(""),o(b,c,d)},r=function(b,c,f,g){var i=[],j=a(document.getElementById(b)),k=j.attr("aria-activedescendant"),l=!1;k&&(l=a(document.getElementById(k)).attr("data-value")),f.children("option").each(function(b,c){a(c).prop("selected")&&i.push({label:a(c).html(),value:a(c).attr("value")})});var m={selectionId:b,items:i,multiple:g};d.render("core/form_autocomplete_selection",m).done(function(c){j.empty().append(a(c).html()),l!==!1&&j.children("[aria-selected=true]").each(function(c,d){a(d).attr("data-value")===l&&h(c,b)})}).fail(e.exception),f.change()},s=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=a(document.getElementById(c)),i=h.children("[aria-selected=true]").attr("data-value");e||f.children("option").prop("selected",!1),f.children("option").each(function(b,c){a(c).attr("value")==i&&a(c).prop("selected",!0)}),r(d,b,f,e),g.val(""),o(b,c,d)},t=function(b,c,d,f,g,h,i,j,k){var l=a(b.currentTarget).val();j.transport(c,l,function(b){var e=j.processResults(c,b),l=[];g.children("option").each(function(b,c){c=a(c),c.prop("selected")?l.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===l.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),g.append(d)}}),p("",d,f,g,h,i,k)},e.exception)},u=function(b,c,d,e,h,r,u,v,w,x){var y=a(document.getElementById(b));y.on("keydown",function(d){switch(d.keyCode){case f.DOWN:return"true"===y.attr("aria-expanded")?k(b,c):!y.val()&&w?require([w],function(a){t(d,v,b,c,h,r,u,a,x)}):p(y.val(),b,c,h,r,u,x),d.preventDefault(),!1;case f.COMMA:return u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.UP:return n(b,c),d.preventDefault(),!1;case f.ENTER:var g=a(document.getElementById(c));return"true"===y.attr("aria-expanded")&&g.children("[aria-selected=true]").length>0?s(b,c,e,r,h):u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.ESCAPE:return"true"===y.attr("aria-expanded")&&o(b,c,e),d.preventDefault(),!1}return!0}),y.on("behat:set-value",function(){u&&q(b,c,e,r,h)}),y.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&(u&&q(b,c,e,r,h),o(b,c,e))},500)});var z=a(document.getElementById(d));z.on("click",function(){y.focus(),g&&window.clearTimeout(g),p(y.val(),b,c,h,r,u,x)});var A=a(document.getElementById(c));A.parent().on("click","[role=option]",function(d){var f=a(d.currentTarget).closest("[role=option]"),g=a(document.getElementById(c)),i=g.children("[aria-hidden=false]").index(f);j(i,b,c),s(b,c,e,r,h)});var B=a(document.getElementById(e));B.on("click","[role=listitem]",function(c){var d=a(c.currentTarget);i(b,e,d,h,r)}),B.on("keydown",function(c){switch(c.keyCode){case f.DOWN:return m(e),c.preventDefault(),!1;case f.UP:return l(e),c.preventDefault(),!1;case f.SPACE:case f.ENTER:var d=a(document.getElementById(e)).children("[data-active-selection=true]");return d&&(i(b,e,d,h,r),c.preventDefault()),!1}return!0}),y.on("input",function(d){var e=a(d.currentTarget).val(),f=a(d.currentTarget).data("last-value");"undefined"==typeof f&&(f=e),f!=e&&(p(e,b,c,h,r,u,x),a(d.currentTarget).data("last-value",e))})};return{enhance:function(c,e,f,g,h){"undefined"==typeof e&&(e=!1),"undefined"==typeof f&&(f=!1),"undefined"==typeof h&&(h=!1);var i=a(c);if(!i)return b.debug("Selector not found: "+c),!1;i.hide().attr("aria-hidden",!0);var j=i.attr("id"),k=i.attr("multiple"),l="form_autocomplete_input-"+a.now(),m="form_autocomplete_suggestions-"+a.now(),n="form_autocomplete_selection-"+a.now(),o="form_autocomplete_downarrow-"+a.now(),p=a("[for="+j+"]"),q=[];i.children("option").each(function(b,c){q[b]={label:c.innerHTML,value:a(c).attr("value")}});var s=d.render("core/form_autocomplete_input",{downArrowId:o,inputId:l,suggestionsId:m,selectionId:n,placeholder:g,multiple:k}),v=d.render("core/form_autocomplete_suggestions",{inputId:l,suggestionsId:m,options:q,multiple:k}),w=d.render("core/form_autocomplete_selection",{selectionId:n,items:[],multiple:k});a.when(s,v,w).done(function(b,d,g){i.after(d),i.after(b),i.after(g),p.attr("for",l),u(l,m,o,n,i,k,e,c,f,h);var j=a(document.getElementById(l)),q=a(document.getElementById(m));q.hide().attr("aria-hidden",!0),f&&require([f],function(b){var d=function(a){t(a,c,l,m,i,k,e,b,h)};j.on("input keypress",d);var f=a(document.getElementById(o));f.on("click",d)}),r(n,l,i,k)})}}});
\ No newline at end of file
+define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e,f){var g=a(d).attr("data-value");f&&e.children("option").each(function(b,c){a(c).attr("value")==g&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),r(c,b,e,f)},j=function(b,c,d){var e=a(document.getElementById(c)),f=a(document.getElementById(d)),g=f.children("[aria-hidden=false]").length;for(b%=g;0>b;)b+=g;var h=a(f.children("[aria-hidden=false]").get(b)),i=a(f.children("[role=option]")).index(h),j=d+"-"+i;f.children().attr("aria-selected",!1).attr("id",""),h.attr("aria-selected",!0).attr("id",j),e.attr("aria-activedescendant",j);var k=h.offset().top-f.offset().top+f.scrollTop()-f.height()/2;f.animate({scrollTop:k},100)},k=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f+1,b,c)},l=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f-1,b,c)},o=function(b,c,d){var e=a(document.getElementById(b)),f=a(document.getElementById(c));e.attr("aria-expanded",!1).attr("aria-activedescendant",d),f.hide().attr("aria-hidden",!0)},p=function(b,f,g,h,i,k,l){var m=a(document.getElementById(f)),n=a(document.getElementById(g)),o=!1,p=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(p[p.length]={label:c.innerHTML,value:a(c).attr("value")})});var q=l?b:b.toLocaleLowerCase();d.render("core/form_autocomplete_suggestions",{inputId:f,suggestionsId:g,options:p,multiple:i}).done(function(b){n.replaceWith(b),n=a(document.getElementById(g)),n.show().attr("aria-hidden",!1),n.children().each(function(b,c){c=a(c),l&&c.text().indexOf(q)>-1||!l&&c.text().toLocaleLowerCase().indexOf(q)>-1?(c.show().attr("aria-hidden",!1),o=!0):c.hide().attr("aria-hidden",!0)}),m.attr("aria-expanded",!0),o?k||j(0,f,g):c.get_string("nosuggestions","form").done(function(a){n.html(a)})}).fail(e.exception)},q=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=g.val(),i=h.split(","),j=!1;a.each(i,function(b,c){if(c=c.trim(),""!==c&&(e||f.children("option").prop("selected",!1),f.children("option").each(function(b,d){a(d).attr("value")==c&&(j=!0,a(d).prop("selected",!0))}),!j)){var d=a("<option>");d.append(c),d.attr("value",c),f.append(d),d.prop("selected",!0),d.attr("data-iscustom",!0)}}),r(d,b,f,e),g.val(""),o(b,c,d)},r=function(b,c,f,g){var i=[],j=a(document.getElementById(b)),k=j.attr("aria-activedescendant"),l=!1;k&&(l=a(document.getElementById(k)).attr("data-value")),f.children("option").each(function(b,c){a(c).prop("selected")&&i.push({label:a(c).html(),value:a(c).attr("value")})});var m={selectionId:b,items:i,multiple:g};d.render("core/form_autocomplete_selection",m).done(function(c){j.empty().append(a(c).html()),l!==!1&&j.children("[aria-selected=true]").each(function(c,d){a(d).attr("data-value")===l&&h(c,b)})}).fail(e.exception),f.change()},s=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=a(document.getElementById(c)),i=h.children("[aria-selected=true]").attr("data-value");e||f.children("option").prop("selected",!1),f.children("option").each(function(b,c){a(c).attr("value")==i&&a(c).prop("selected",!0)}),r(d,b,f,e),g.val(""),o(b,c,d)},t=function(b,c,d,f,g,h,i,j,k){var l=a(b.currentTarget).val();j.transport(c,l,function(b){var e=j.processResults(c,b),l=[];g.children("option").each(function(b,c){c=a(c),c.prop("selected")?l.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===l.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),g.append(d)}}),p("",d,f,g,h,i,k)},e.exception)},u=function(b,c,d,e,h,r,u,v,w,x,y){var z=a(document.getElementById(b));if(z.on("keydown",function(d){switch(d.keyCode){case f.DOWN:return y?("true"===z.attr("aria-expanded")?k(b,c):!z.val()&&w?require([w],function(a){t(d,v,b,c,h,r,u,a,x)}):p(z.val(),b,c,h,r,u,x),d.preventDefault(),!1):!0;case f.COMMA:return u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.UP:return n(b,c),d.preventDefault(),!1;case f.ENTER:var g=a(document.getElementById(c));return"true"===z.attr("aria-expanded")&&g.children("[aria-selected=true]").length>0?s(b,c,e,r,h):u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.ESCAPE:return"true"===z.attr("aria-expanded")&&o(b,c,e),d.preventDefault(),!1}return!0}),z.on("behat:set-value",function(){u&&q(b,c,e,r,h)}),z.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&(u&&q(b,c,e,r,h),o(b,c,e))},500)}),y){var A=a(document.getElementById(d));A.on("click",function(){z.focus(),g&&window.clearTimeout(g),p(z.val(),b,c,h,r,u,x)})}var B=a(document.getElementById(c));B.parent().on("click","[role=option]",function(d){var f=a(d.currentTarget).closest("[role=option]"),g=a(document.getElementById(c)),i=g.children("[aria-hidden=false]").index(f);j(i,b,c),s(b,c,e,r,h)});var C=a(document.getElementById(e));C.on("click","[role=listitem]",function(c){var d=a(c.currentTarget);i(b,e,d,h,r)}),C.on("keydown",function(c){switch(c.keyCode){case f.DOWN:return m(e),c.preventDefault(),!1;case f.UP:return l(e),c.preventDefault(),!1;case f.SPACE:case f.ENTER:var d=a(document.getElementById(e)).children("[data-active-selection=true]");return d&&(i(b,e,d,h,r),c.preventDefault()),!1}return!0}),y&&z.on("input",function(d){var e=a(d.currentTarget).val(),f=a(d.currentTarget).data("last-value");"undefined"==typeof f&&(f=e),f!=e&&(p(e,b,c,h,r,u,x),a(d.currentTarget).data("last-value",e))})};return{enhance:function(c,e,f,g,h,i){"undefined"==typeof e&&(e=!1),"undefined"==typeof f&&(f=!1),"undefined"==typeof h&&(h=!1),"undefined"==typeof i&&(i=!0);var j=a(c);if(!j)return b.debug("Selector not found: "+c),!1;j.hide().attr("aria-hidden",!0);var k=j.attr("id"),l=j.attr("multiple"),m="form_autocomplete_input-"+a.now(),n="form_autocomplete_suggestions-"+a.now(),o="form_autocomplete_selection-"+a.now(),p="form_autocomplete_downarrow-"+a.now(),q=a("[for="+k+"]"),s=[];j.children("option").each(function(b,c){s[b]={label:c.innerHTML,value:a(c).attr("value")}});var v=d.render("core/form_autocomplete_input",{downArrowId:p,inputId:m,suggestionsId:n,selectionId:o,placeholder:g,multiple:l,showSuggestions:i}),w=d.render("core/form_autocomplete_suggestions",{inputId:m,suggestionsId:n,options:s,multiple:l}),x=d.render("core/form_autocomplete_selection",{selectionId:o,items:[],multiple:l});a.when(v,w,x).done(function(b,d,g){j.after(d),j.after(b),j.after(g),q.attr("for",m),u(m,n,p,o,j,l,e,c,f,h,i);var k=a(document.getElementById(m)),s=a(document.getElementById(n));s.hide().attr("aria-hidden",!0),f&&require([f],function(b){var d=function(a){t(a,c,m,n,j,l,e,b,h)};k.on("input keypress",d);var f=a(document.getElementById(p));f.on("click",d)}),r(o,m,j,l)})}}});
\ No newline at end of file
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
index 05cdc6c74a7..48ce37f8d01 100644
--- a/lib/amd/src/form-autocomplete.js
+++ b/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));
diff --git a/lib/form/autocomplete.php b/lib/form/autocomplete.php
index 22e0739927d..206bc67b689 100644
--- a/lib/form/autocomplete.php
+++ b/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();
     }
diff --git a/lib/form/tags.php b/lib/form/tags.php
index 545f1f82076..961a2629921 100644
--- a/lib/form/tags.php
+++ b/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);
     }
diff --git a/lib/templates/form_autocomplete_input.mustache b/lib/templates/form_autocomplete_input.mustache
index 077ed15b571..ad064f29eeb 100644
--- a/lib/templates/form_autocomplete_input.mustache
+++ b/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}}

From 273b2556737e65d0e93413c9159d24083c6abd03 Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Fri, 30 Oct 2015 14:57:59 +0800
Subject: [PATCH 2/2] MDL-51970 autocomplete: Small refactor because too many
 options

Each function was taking 8-10 args - combine them all in state and options
objects and pass those around instead.
---
 lib/amd/build/form-autocomplete.min.js |   2 +-
 lib/amd/src/form-autocomplete.js       | 394 ++++++++++---------------
 2 files changed, 163 insertions(+), 233 deletions(-)

diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
index 22d47c943c6..b6ca0682289 100644
--- a/lib/amd/build/form-autocomplete.min.js
+++ b/lib/amd/build/form-autocomplete.min.js
@@ -1 +1 @@
-define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e,f){var g=a(d).attr("data-value");f&&e.children("option").each(function(b,c){a(c).attr("value")==g&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),r(c,b,e,f)},j=function(b,c,d){var e=a(document.getElementById(c)),f=a(document.getElementById(d)),g=f.children("[aria-hidden=false]").length;for(b%=g;0>b;)b+=g;var h=a(f.children("[aria-hidden=false]").get(b)),i=a(f.children("[role=option]")).index(h),j=d+"-"+i;f.children().attr("aria-selected",!1).attr("id",""),h.attr("aria-selected",!0).attr("id",j),e.attr("aria-activedescendant",j);var k=h.offset().top-f.offset().top+f.scrollTop()-f.height()/2;f.animate({scrollTop:k},100)},k=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f+1,b,c)},l=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f-1,b,c)},o=function(b,c,d){var e=a(document.getElementById(b)),f=a(document.getElementById(c));e.attr("aria-expanded",!1).attr("aria-activedescendant",d),f.hide().attr("aria-hidden",!0)},p=function(b,f,g,h,i,k,l){var m=a(document.getElementById(f)),n=a(document.getElementById(g)),o=!1,p=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(p[p.length]={label:c.innerHTML,value:a(c).attr("value")})});var q=l?b:b.toLocaleLowerCase();d.render("core/form_autocomplete_suggestions",{inputId:f,suggestionsId:g,options:p,multiple:i}).done(function(b){n.replaceWith(b),n=a(document.getElementById(g)),n.show().attr("aria-hidden",!1),n.children().each(function(b,c){c=a(c),l&&c.text().indexOf(q)>-1||!l&&c.text().toLocaleLowerCase().indexOf(q)>-1?(c.show().attr("aria-hidden",!1),o=!0):c.hide().attr("aria-hidden",!0)}),m.attr("aria-expanded",!0),o?k||j(0,f,g):c.get_string("nosuggestions","form").done(function(a){n.html(a)})}).fail(e.exception)},q=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=g.val(),i=h.split(","),j=!1;a.each(i,function(b,c){if(c=c.trim(),""!==c&&(e||f.children("option").prop("selected",!1),f.children("option").each(function(b,d){a(d).attr("value")==c&&(j=!0,a(d).prop("selected",!0))}),!j)){var d=a("<option>");d.append(c),d.attr("value",c),f.append(d),d.prop("selected",!0),d.attr("data-iscustom",!0)}}),r(d,b,f,e),g.val(""),o(b,c,d)},r=function(b,c,f,g){var i=[],j=a(document.getElementById(b)),k=j.attr("aria-activedescendant"),l=!1;k&&(l=a(document.getElementById(k)).attr("data-value")),f.children("option").each(function(b,c){a(c).prop("selected")&&i.push({label:a(c).html(),value:a(c).attr("value")})});var m={selectionId:b,items:i,multiple:g};d.render("core/form_autocomplete_selection",m).done(function(c){j.empty().append(a(c).html()),l!==!1&&j.children("[aria-selected=true]").each(function(c,d){a(d).attr("data-value")===l&&h(c,b)})}).fail(e.exception),f.change()},s=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=a(document.getElementById(c)),i=h.children("[aria-selected=true]").attr("data-value");e||f.children("option").prop("selected",!1),f.children("option").each(function(b,c){a(c).attr("value")==i&&a(c).prop("selected",!0)}),r(d,b,f,e),g.val(""),o(b,c,d)},t=function(b,c,d,f,g,h,i,j,k){var l=a(b.currentTarget).val();j.transport(c,l,function(b){var e=j.processResults(c,b),l=[];g.children("option").each(function(b,c){c=a(c),c.prop("selected")?l.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===l.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),g.append(d)}}),p("",d,f,g,h,i,k)},e.exception)},u=function(b,c,d,e,h,r,u,v,w,x,y){var z=a(document.getElementById(b));if(z.on("keydown",function(d){switch(d.keyCode){case f.DOWN:return y?("true"===z.attr("aria-expanded")?k(b,c):!z.val()&&w?require([w],function(a){t(d,v,b,c,h,r,u,a,x)}):p(z.val(),b,c,h,r,u,x),d.preventDefault(),!1):!0;case f.COMMA:return u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.UP:return n(b,c),d.preventDefault(),!1;case f.ENTER:var g=a(document.getElementById(c));return"true"===z.attr("aria-expanded")&&g.children("[aria-selected=true]").length>0?s(b,c,e,r,h):u&&q(b,c,e,r,h),d.preventDefault(),!1;case f.ESCAPE:return"true"===z.attr("aria-expanded")&&o(b,c,e),d.preventDefault(),!1}return!0}),z.on("behat:set-value",function(){u&&q(b,c,e,r,h)}),z.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&(u&&q(b,c,e,r,h),o(b,c,e))},500)}),y){var A=a(document.getElementById(d));A.on("click",function(){z.focus(),g&&window.clearTimeout(g),p(z.val(),b,c,h,r,u,x)})}var B=a(document.getElementById(c));B.parent().on("click","[role=option]",function(d){var f=a(d.currentTarget).closest("[role=option]"),g=a(document.getElementById(c)),i=g.children("[aria-hidden=false]").index(f);j(i,b,c),s(b,c,e,r,h)});var C=a(document.getElementById(e));C.on("click","[role=listitem]",function(c){var d=a(c.currentTarget);i(b,e,d,h,r)}),C.on("keydown",function(c){switch(c.keyCode){case f.DOWN:return m(e),c.preventDefault(),!1;case f.UP:return l(e),c.preventDefault(),!1;case f.SPACE:case f.ENTER:var d=a(document.getElementById(e)).children("[data-active-selection=true]");return d&&(i(b,e,d,h,r),c.preventDefault()),!1}return!0}),y&&z.on("input",function(d){var e=a(d.currentTarget).val(),f=a(d.currentTarget).data("last-value");"undefined"==typeof f&&(f=e),f!=e&&(p(e,b,c,h,r,u,x),a(d.currentTarget).data("last-value",e))})};return{enhance:function(c,e,f,g,h,i){"undefined"==typeof e&&(e=!1),"undefined"==typeof f&&(f=!1),"undefined"==typeof h&&(h=!1),"undefined"==typeof i&&(i=!0);var j=a(c);if(!j)return b.debug("Selector not found: "+c),!1;j.hide().attr("aria-hidden",!0);var k=j.attr("id"),l=j.attr("multiple"),m="form_autocomplete_input-"+a.now(),n="form_autocomplete_suggestions-"+a.now(),o="form_autocomplete_selection-"+a.now(),p="form_autocomplete_downarrow-"+a.now(),q=a("[for="+k+"]"),s=[];j.children("option").each(function(b,c){s[b]={label:c.innerHTML,value:a(c).attr("value")}});var v=d.render("core/form_autocomplete_input",{downArrowId:p,inputId:m,suggestionsId:n,selectionId:o,placeholder:g,multiple:l,showSuggestions:i}),w=d.render("core/form_autocomplete_suggestions",{inputId:m,suggestionsId:n,options:s,multiple:l}),x=d.render("core/form_autocomplete_selection",{selectionId:o,items:[],multiple:l});a.when(v,w,x).done(function(b,d,g){j.after(d),j.after(b),j.after(g),q.attr("for",m),u(m,n,p,o,j,l,e,c,f,h,i);var k=a(document.getElementById(m)),s=a(document.getElementById(n));s.hide().attr("aria-hidden",!0),f&&require([f],function(b){var d=function(a){t(a,c,m,n,j,l,e,b,h)};k.on("input keypress",d);var f=a(document.getElementById(p));f.on("click",d)}),r(o,m,j,l)})}}});
\ No newline at end of file
+define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c.selectionId)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c.selectionId+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e){var f=a(d).attr("data-value");b.multiple&&e.children("option").each(function(b,c){a(c).attr("value")==f&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),r(b,c,e)},j=function(b,c){var d=a(document.getElementById(c.inputId)),e=a(document.getElementById(c.suggestionsId)),f=e.children("[aria-hidden=false]").length;for(b%=f;0>b;)b+=f;var g=a(e.children("[aria-hidden=false]").get(b)),h=a(e.children("[role=option]")).index(g),i=c.suggestionsId+"-"+h;e.children().attr("aria-selected",!1).attr("id",""),g.attr("aria-selected",!0).attr("id",i),d.attr("aria-activedescendant",i);var j=g.offset().top-e.offset().top+e.scrollTop()-e.height()/2;e.animate({scrollTop:j},100)},k=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);j(e+1,b)},l=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);j(e-1,b)},o=function(b){var c=a(document.getElementById(b.inputId)),d=a(document.getElementById(b.suggestionsId));c.attr("aria-expanded",!1).attr("aria-activedescendant",b.selectionId),d.hide().attr("aria-hidden",!0)},p=function(b,f,g,h){var i=a(document.getElementById(f.inputId)),k=a(document.getElementById(f.suggestionsId)),l=!1,m=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(m[m.length]={label:c.innerHTML,value:a(c).attr("value")})});var n=f.caseSensitive?g:g.toLocaleLowerCase(),o=a.extend({options:m},b,f);d.render("core/form_autocomplete_suggestions",o).done(function(d){k.replaceWith(d),k=a(document.getElementById(f.suggestionsId)),k.show().attr("aria-hidden",!1),k.children().each(function(c,d){d=a(d),b.caseSensitive&&d.text().indexOf(n)>-1||!b.caseSensitive&&d.text().toLocaleLowerCase().indexOf(n)>-1?(d.show().attr("aria-hidden",!1),l=!0):d.hide().attr("aria-hidden",!0)}),i.attr("aria-expanded",!0),l?b.tags||j(0,f):c.get_string("nosuggestions","form").done(function(a){k.html(a)})}).fail(e.exception)},q=function(b,c,d){var e=a(document.getElementById(c.inputId)),f=e.val(),g=f.split(","),h=!1;a.each(g,function(c,e){if(e=e.trim(),""!==e&&(b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==e&&(h=!0,a(c).prop("selected",!0))}),!h)){var f=a("<option>");f.append(e),f.attr("value",e),d.append(f),f.prop("selected",!0),f.attr("data-iscustom",!0)}}),r(b,c,d),e.val(""),o(c)},r=function(b,c,f){var g=[],i=a(document.getElementById(c.selectionId)),j=i.attr("aria-activedescendant"),k=!1;j&&(k=a(document.getElementById(j)).attr("data-value")),f.children("option").each(function(b,c){a(c).prop("selected")&&g.push({label:a(c).html(),value:a(c).attr("value")})});var l=a.extend({items:g},b,c);d.render("core/form_autocomplete_selection",l).done(function(b){i.empty().append(a(b).html()),k!==!1&&i.children("[aria-selected=true]").each(function(b,d){a(d).attr("data-value")===k&&h(b,c)})}).fail(e.exception),f.change()},s=function(b,c,d){var e=a(document.getElementById(c.inputId)),f=a(document.getElementById(c.suggestionsId)),g=f.children("[aria-selected=true]").attr("data-value");b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==g&&a(c).prop("selected",!0)}),r(b,c,d),e.val(""),o(c)},t=function(b,c,d,f,g){var h=a(b.currentTarget).val();g.transport(c.selector,h,function(b){var e=g.processResults(c.selector,b),h=[];f.children("option").each(function(b,c){c=a(c),c.prop("selected")?h.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===h.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),f.append(d)}}),p(c,d,"",f)},e.exception)},u=function(b,c,d){var e=a(document.getElementById(c.inputId));if(e.on("keydown",function(g){switch(g.keyCode){case f.DOWN:return b.showSuggestions?("true"===e.attr("aria-expanded")?k(c):!e.val()&&b.ajax?require([b.ajax],function(a){t(g,b,c,d,a)}):p(b,c,e.val(),d),g.preventDefault(),!1):!0;case f.COMMA:return b.tags&&q(b,c,d),g.preventDefault(),!1;case f.UP:return n(c),g.preventDefault(),!1;case f.ENTER:var h=a(document.getElementById(c.suggestionsId));return"true"===e.attr("aria-expanded")&&h.children("[aria-selected=true]").length>0?s(b,c,d):b.tags&&q(b,c,d),g.preventDefault(),!1;case f.ESCAPE:return"true"===e.attr("aria-expanded")&&o(c),g.preventDefault(),!1}return!0}),e.on("behat:set-value",function(){b.tags&&q(b,c,d)}),e.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&(b.tags&&q(b,c,d),o(c))},500)}),b.showSuggestions){var h=a(document.getElementById(c.downArrowId));h.on("click",function(){e.focus(),g&&window.clearTimeout(g),p(b,c,e.val(),d)})}var r=a(document.getElementById(c.suggestionsId));r.parent().on("click","[role=option]",function(e){var f=a(e.currentTarget).closest("[role=option]"),g=a(document.getElementById(c.suggestionsId)),h=g.children("[aria-hidden=false]").index(f);j(h,c),s(b,c,d)});var u=a(document.getElementById(c.selectionId));u.on("click","[role=listitem]",function(e){var f=a(e.currentTarget);i(b,c,f,d)}),u.on("keydown",function(e){switch(e.keyCode){case f.DOWN:return m(c),e.preventDefault(),!1;case f.UP:return l(c),e.preventDefault(),!1;case f.SPACE:case f.ENTER:var g=a(document.getElementById(c.selectionId)).children("[data-active-selection=true]");return g&&(i(b,c,g,d),e.preventDefault()),!1}return!0}),b.showSuggestions&&e.on("input",function(e){var f=a(e.currentTarget).val(),g=a(e.currentTarget).data("last-value");"undefined"==typeof g&&(g=f),g!=f&&(p(b,c,f,d),a(e.currentTarget).data("last-value",f))})};return{enhance:function(c,e,f,g,h,i){var j={selector:c,tags:!1,ajax:!1,placeholder:g,caseSensitive:!1,showSuggestions:!0};"undefined"!=typeof e&&(j.tags=e),"undefined"!=typeof f&&(j.ajax=f),"undefined"!=typeof h&&(j.caseSensitive=h),"undefined"!=typeof i&&(j.showSuggestions=i);var k=a(c);if(!k)return b.debug("Selector not found: "+c),!1;k.hide().attr("aria-hidden",!0);var l={selectId:k.attr("id"),inputId:"form_autocomplete_input-"+a.now(),suggestionsId:"form_autocomplete_suggestions-"+a.now(),selectionId:"form_autocomplete_selection-"+a.now(),downArrowId:"form_autocomplete_downarrow-"+a.now()};j.multiple=k.attr("multiple");var m=a("[for="+l.selectId+"]"),n=[];k.children("option").each(function(b,c){n[b]={label:c.innerHTML,value:a(c).attr("value")}});var o=a.extend({},j,l);o.options=n,o.items=[];var p=d.render("core/form_autocomplete_input",o),q=d.render("core/form_autocomplete_suggestions",o),s=d.render("core/form_autocomplete_selection",o);a.when(p,q,s).done(function(b,c,d){k.after(c),k.after(b),k.after(d),m.attr("for",l.inputId),u(j,l,k);var e=a(document.getElementById(l.inputId)),f=a(document.getElementById(l.suggestionsId));f.hide().attr("aria-hidden",!0),j.ajax&&require([j.ajax],function(b){var c=function(a){t(a,j,l,k,b)};e.on("input keypress",c);var d=a(document.getElementById(l.downArrowId));d.on("click",c)}),r(j,l,k)})}}});
\ No newline at end of file
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
index 48ce37f8d01..9f68d42db8f 100644
--- a/lib/amd/src/form-autocomplete.js
+++ b/lib/amd/src/form-autocomplete.js
@@ -46,11 +46,11 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      * @method activateSelection
      * @private
      * @param {Number} index The index in the current (visible) list of selection.
-     * @param {String} selectionId The id of the selection element for this instance of the autocomplete.
+     * @param {Object} state State variables for this autocomplete element.
      */
-    var activateSelection = function(index, selectionId) {
+    var activateSelection = function(index, state) {
         // Find the elements in the DOM.
-        var selectionElement = $(document.getElementById(selectionId));
+        var selectionElement = $(document.getElementById(state.selectionId));
 
         // Count the visible items.
         var length = selectionElement.children('[aria-selected=true]').length;
@@ -62,7 +62,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
         // Find the specified element.
         var element = $(selectionElement.children('[aria-selected=true]').get(index));
         // Create an id we can assign to this element.
-        var itemId = selectionId + '-' + index;
+        var itemId = state.selectionId + '-' + index;
 
         // Deselect all the selections.
         selectionElement.children().attr('data-active-selection', false).attr('id', '');
@@ -77,17 +77,16 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method deselectItem
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} selectionId The id of the selection element for this instance of the autocomplete.
+     * @param {Object} options Original options for this autocomplete element.
+     * @param {Object} state State variables for this autocomplete element.
      * @param {Element} The item to be deselected.
      * @param {Element} originalSelect The original select list.
-     * @param {Boolean} multiple Is this a multi select.
      */
-    var deselectItem = function(inputId, selectionId, item, originalSelect, multiple) {
+    var deselectItem = function(options, state, item, originalSelect) {
         var selectedItemValue = $(item).attr('data-value');
 
         // We can only deselect items if this is a multi-select field.
-        if (multiple) {
+        if (options.multiple) {
             // Look for a match, and toggle the selected property if there is a match.
             originalSelect.children('option').each(function(index, ele) {
                 if ($(ele).attr('value') == selectedItemValue) {
@@ -100,7 +99,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             });
         }
         // Rerender the selection list.
-        updateSelectionList(selectionId, inputId, originalSelect, multiple);
+        updateSelectionList(options, state, originalSelect);
     };
 
     /**
@@ -109,13 +108,12 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      * @method activateItem
      * @private
      * @param {Number} index The index in the current (visible) list of suggestions.
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} state State variables for this instance of autocomplete.
      */
-    var activateItem = function(index, inputId, suggestionsId) {
+    var activateItem = function(index, state) {
         // Find the elements in the DOM.
-        var inputElement = $(document.getElementById(inputId));
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var inputElement = $(document.getElementById(state.inputId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
 
         // Count the visible items.
         var length = suggestionsElement.children('[aria-hidden=false]').length;
@@ -129,7 +127,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
         // Find the index of this item in the full list of suggestions (including hidden).
         var globalIndex = $(suggestionsElement.children('[role=option]')).index(element);
         // Create an id we can assign to this element.
-        var itemId = suggestionsId + '-' + globalIndex;
+        var itemId = state.suggestionsId + '-' + globalIndex;
 
         // Deselect all the suggestions.
         suggestionsElement.children().attr('aria-selected', false).attr('id', '');
@@ -153,18 +151,17 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method activateNextItem
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} state State variable for this auto complete element.
      */
-    var activateNextItem = function(inputId, suggestionsId) {
+    var activateNextItem = function(state) {
         // Find the list of suggestions.
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
         // Find the active one.
         var element = suggestionsElement.children('[aria-selected=true]');
         // Find it's index.
         var current = suggestionsElement.children('[aria-hidden=false]').index(element);
         // Activate the next one.
-        activateItem(current+1, inputId, suggestionsId);
+        activateItem(current+1, state);
     };
 
     /**
@@ -172,42 +169,42 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method activatePreviousSelection
      * @private
-     * @param {String} selectionId The id of the selection element for this instance of the autocomplete.
+     * @param {Object} state State variables for this instance of autocomplete.
      */
-    var activatePreviousSelection = function(selectionId) {
+    var activatePreviousSelection = function(state) {
         // Find the list of selections.
-        var selectionsElement = $(document.getElementById(selectionId));
+        var selectionsElement = $(document.getElementById(state.selectionId));
         // Find the active one.
         var element = selectionsElement.children('[data-active-selection=true]');
         if (!element) {
-            activateSelection(0, selectionId);
+            activateSelection(0, state);
             return;
         }
         // Find it's index.
         var current = selectionsElement.children('[aria-selected=true]').index(element);
         // Activate the next one.
-        activateSelection(current-1, selectionId);
+        activateSelection(current-1, state);
     };
     /**
      * Find the index of the current active selection, and activate the next one.
      *
      * @method activateNextSelection
      * @private
-     * @param {String} selectionId The id of the selection element for this instance of the autocomplete.
+     * @param {Object} state State variables for this instance of autocomplete.
      */
-    var activateNextSelection = function(selectionId) {
+    var activateNextSelection = function(state) {
         // Find the list of selections.
-        var selectionsElement = $(document.getElementById(selectionId));
+        var selectionsElement = $(document.getElementById(state.selectionId));
         // Find the active one.
         var element = selectionsElement.children('[data-active-selection=true]');
         if (!element) {
-            activateSelection(0, selectionId);
+            activateSelection(0, state);
             return;
         }
         // Find it's index.
         var current = selectionsElement.children('[aria-selected=true]').index(element);
         // Activate the next one.
-        activateSelection(current+1, selectionId);
+        activateSelection(current+1, state);
     };
 
     /**
@@ -215,18 +212,17 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method activatePreviousItem
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} state State variables for this autocomplete element.
      */
-    var activatePreviousItem = function(inputId, suggestionsId) {
+    var activatePreviousItem = function(state) {
         // Find the list of suggestions.
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
         // Find the active one.
         var element = suggestionsElement.children('[aria-selected=true]');
         // Find it's index.
         var current = suggestionsElement.children('[aria-hidden=false]').index(element);
         // Activate the next one.
-        activateItem(current-1, inputId, suggestionsId);
+        activateItem(current-1, state);
     };
 
     /**
@@ -234,16 +230,15 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method closeSuggestions
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} state State variables for this autocomplete element.
      */
-    var closeSuggestions = function(inputId, suggestionsId, selectionId) {
+    var closeSuggestions = function(state) {
         // Find the elements in the DOM.
-        var inputElement = $(document.getElementById(inputId));
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var inputElement = $(document.getElementById(state.inputId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
 
         // Announce the list of suggestions was closed, and read the current list of selections.
-        inputElement.attr('aria-expanded', false).attr('aria-activedescendant', selectionId);
+        inputElement.attr('aria-expanded', false).attr('aria-activedescendant', state.selectionId);
         // Hide the suggestions list (from screen readers too).
         suggestionsElement.hide().attr('aria-hidden', true);
     };
@@ -253,46 +248,44 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method updateSuggestions
      * @private
-     * @param {String} query The current query typed in the input field.
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} options The original options for this autocomplete.
+     * @param {Object} state The state variables for this autocomplete.
+     * @param {String} query The current text for the search string.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
-     * @param {Boolean} multiple Are multiple items allowed to be selected?
-     * @param {Boolean} tags Are we allowed to create new items on the fly?
-     * @param {Boolean} caseSensitive - If search has to be made case sensitive.
      */
-    var updateSuggestions = function(query, inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive) {
+    var updateSuggestions = function(options, state, query, originalSelect) {
         // Find the elements in the DOM.
-        var inputElement = $(document.getElementById(inputId));
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var inputElement = $(document.getElementById(state.inputId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
 
         // Used to track if we found any visible suggestions.
         var matchingElements = false;
         // Options is used by the context when rendering the suggestions from a template.
-        var options = [];
+        var suggestions = [];
         originalSelect.children('option').each(function(index, option) {
             if ($(option).prop('selected') !== true) {
-                options[options.length] = { label: option.innerHTML, value: $(option).attr('value') };
+                suggestions[suggestions.length] = { label: option.innerHTML, value: $(option).attr('value') };
             }
         });
 
         // Re-render the list of suggestions.
-        var searchquery = caseSensitive ? query : query.toLocaleLowerCase();
+        var searchquery = state.caseSensitive ? query : query.toLocaleLowerCase();
+        var context = $.extend({ options: suggestions}, options, state);
         templates.render(
             'core/form_autocomplete_suggestions',
-            { inputId: inputId, suggestionsId: suggestionsId, options: options, multiple: multiple}
+            context
         ).done(function(newHTML) {
             // We have the new template, insert it in the page.
             suggestionsElement.replaceWith(newHTML);
             // Get the element again.
-            suggestionsElement = $(document.getElementById(suggestionsId));
+            suggestionsElement = $(document.getElementById(state.suggestionsId));
             // Show it if it is hidden.
             suggestionsElement.show().attr('aria-hidden', false);
             // For each option in the list, hide it if it doesn't match the query.
             suggestionsElement.children().each(function(index, node) {
                 node = $(node);
-                if ((caseSensitive && node.text().indexOf(searchquery) > -1) ||
-                        (!caseSensitive && node.text().toLocaleLowerCase().indexOf(searchquery) > -1)) {
+                if ((options.caseSensitive && node.text().indexOf(searchquery) > -1) ||
+                        (!options.caseSensitive && node.text().toLocaleLowerCase().indexOf(searchquery) > -1)) {
                     node.show().attr('aria-hidden', false);
                     matchingElements = true;
                 } else {
@@ -305,8 +298,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 // We only activate the first item in the list if tags is false,
                 // because otherwise "Enter" would select the first item, instead of
                 // creating a new tag.
-                if (!tags) {
-                    activateItem(0, inputId, suggestionsId);
+                if (!options.tags) {
+                    activateItem(0, state);
                 }
             } else {
                 // Nothing matches. Tell them that.
@@ -323,14 +316,13 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method createItem
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
-     * @param {Boolean} multiple Are multiple items allowed to be selected?
+     * @param {Object} options The original options for the autocomplete.
+     * @param {Object} state State variables for the autocomplete.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
      */
-    var createItem = function(inputId, suggestionsId, selectionId, multiple, originalSelect) {
+    var createItem = function(options, state, originalSelect) {
         // Find the element in the DOM.
-        var inputElement = $(document.getElementById(inputId));
+        var inputElement = $(document.getElementById(state.inputId));
         // Get the current text in the input field.
         var query = inputElement.val();
         var tags = query.split(',');
@@ -340,7 +332,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             // If we can only select one at a time, deselect any current value.
             tag = tag.trim();
             if (tag !== '') {
-                if (!multiple) {
+                if (!options.multiple) {
                     originalSelect.children('option').prop('selected', false);
                 }
                 // Look for an existing option in the select list that matches this new tag.
@@ -363,12 +355,12 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             }
         });
 
-        updateSelectionList(selectionId, inputId, originalSelect, multiple);
+        updateSelectionList(options, state, originalSelect);
 
         // Clear the input field.
         inputElement.val('');
         // Close the suggestions list.
-        closeSuggestions(inputId, suggestionsId, selectionId);
+        closeSuggestions(state);
     };
 
     /**
@@ -376,15 +368,14 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method updateSelectionList
      * @private
-     * @param {String} selectionId The id of the selections element for this instance of the autocomplete.
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
+     * @param {Object} options Original options for this autocomplete element.
+     * @param {Object} state State variables for this autocomplete element.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
-     * @param {Boolean} multiple Does this element support multiple selections.
      */
-    var updateSelectionList = function(selectionId, inputId, originalSelect, multiple) {
+    var updateSelectionList = function(options, state, originalSelect) {
         // Build up a valid context to re-render the template.
         var items = [];
-        var newSelection = $(document.getElementById(selectionId));
+        var newSelection = $(document.getElementById(state.selectionId));
         var activeId = newSelection.attr('aria-activedescendant');
         var activeValue = false;
 
@@ -396,11 +387,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 items.push( { label: $(ele).html(), value: $(ele).attr('value') } );
             }
         });
-        var context = {
-            selectionId: selectionId,
-            items: items,
-            multiple: multiple
-        };
+        var context = $.extend({ items: items }, options, state);
+
         // Render the template.
         templates.render('core/form_autocomplete_selection', context).done(function(newHTML) {
             // Add it to the page.
@@ -410,7 +398,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 // Reselect any previously selected item.
                 newSelection.children('[aria-selected=true]').each(function(index, ele) {
                     if ($(ele).attr('data-value') === activeValue) {
-                        activateSelection(index, selectionId);
+                        activateSelection(index, state);
                     }
                 });
             }
@@ -425,16 +413,14 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method selectCurrentItem
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
-     * @param {String} selectionId The id of the selection element for this instance of the autocomplete.
-     * @param {Boolean} multiple Are multiple items allowed to be selected?
+     * @param {Object} options The original options for the autocomplete.
+     * @param {Object} state State variables for the autocomplete.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
      */
-    var selectCurrentItem = function(inputId, suggestionsId, selectionId, multiple, originalSelect) {
+    var selectCurrentItem = function(options, state, originalSelect) {
         // Find the elements in the page.
-        var inputElement = $(document.getElementById(inputId));
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var inputElement = $(document.getElementById(state.inputId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
         // Here loop through suggestions and set val to join of all selected items.
 
         var selectedItemValue = suggestionsElement.children('[aria-selected=true]').attr('data-value');
@@ -442,7 +428,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
         // select one or more items correctly.
         // Take care to use 'prop' and not 'attr' for selected properties.
         // If only one can be selected at a time, start by deselecting everything.
-        if (!multiple) {
+        if (!options.multiple) {
             originalSelect.children('option').prop('selected', false);
         }
         // Look for a match, and toggle the selected property if there is a match.
@@ -452,11 +438,11 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             }
         });
         // Rerender the selection list.
-        updateSelectionList(selectionId, inputId, originalSelect, multiple);
+        updateSelectionList(options, state, originalSelect);
         // Clear the input element.
         inputElement.val('');
         // Close the list of suggestions.
-        closeSuggestions(inputId, suggestionsId, selectionId);
+        closeSuggestions(state);
     };
 
     /**
@@ -465,22 +451,18 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      * @method updateAjax
      * @private
      * @param {Event} e The event that triggered this update.
-     * @param {String} selector The selector pointing to the original select.
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
+     * @param {Object} options The original options for the autocomplete.
+     * @param {Object} state The state variables for the autocomplete.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
-     * @param {Boolean} multiple Are multiple items allowed to be selected?
-     * @param {Boolean} tags Are we allowed to create new items on the fly?
      * @param {Object} ajaxHandler This is a module that does the ajax fetch and translates the results.
-     * @param {Boolean} caseSensitive - If search has to be made case sensitive.
      */
-    var updateAjax = function(e, selector, inputId, suggestionsId, originalSelect, multiple, tags, ajaxHandler, caseSensitive) {
+    var updateAjax = function(e, options, state, originalSelect, ajaxHandler) {
         // Get the query to pass to the ajax function.
         var query = $(e.currentTarget).val();
         // Call the transport function to do the ajax (name taken from Select2).
-        ajaxHandler.transport(selector, query, function(results) {
+        ajaxHandler.transport(options.selector, query, function(results) {
             // We got a result - pass it through the translator before using it.
-            var processedResults = ajaxHandler.processResults(selector, results);
+            var processedResults = ajaxHandler.processResults(options.selector, results);
             var existingValues = [];
 
             // Now destroy all options that are not currently selected.
@@ -502,7 +484,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 }
             });
             // Update the list of suggestions now from the new values in the select list.
-            updateSuggestions('', inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
+            updateSuggestions(options, state, '', originalSelect);
         }, notification.exception);
     };
 
@@ -511,93 +493,60 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      *
      * @method addNavigation
      * @private
-     * @param {String} inputId The id of the input element for this instance of the autocomplete.
-     * @param {String} suggestionsId The id of the suggestions element for this instance of the autocomplete.
-     * @param {String} downArrowId The id of arrow to open the suggestions list.
-     * @param {String} selectionId The id of element that shows the current selections.
+     * @param {Object} options The options used to create this autocomplete element.
+     * @param {Object} state State variables for this autocomplete element.
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
-     * @param {Boolean} multiple Are multiple items allowed to be selected?
-     * @param {Boolean} tags Are we allowed to create new items on the fly?
-     * @param {String} selector The selector for this select list.
-     * @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,
-                                 downArrowId,
-                                 selectionId,
-                                 originalSelect,
-                                 multiple,
-                                 tags,
-                                 selector,
-                                 ajax,
-                                 caseSensitive,
-                                 showSuggestions) {
+    var addNavigation = function(options, state, originalSelect) {
         // Start with the input element.
-        var inputElement = $(document.getElementById(inputId));
+        var inputElement = $(document.getElementById(state.inputId));
         // Add keyboard nav with keydown.
         inputElement.on('keydown', function(e) {
             switch (e.keyCode) {
                 case KEYS.DOWN:
                     // If the suggestion list is open, move to the next item.
-                    if (!showSuggestions) {
+                    if (!options.showSuggestions) {
                         // Do not consume this event.
                         return true;
                     } else if (inputElement.attr('aria-expanded') === "true") {
-                        activateNextItem(inputId, suggestionsId);
+                        activateNextItem(state);
                     } else {
                         // Handle ajax population of suggestions.
-                        if (!inputElement.val() && ajax) {
-                            require([ajax], function(ajaxHandler) {
-                                updateAjax(e,
-                                    selector,
-                                    inputId,
-                                    suggestionsId,
-                                    originalSelect,
-                                    multiple,
-                                    tags,
-                                    ajaxHandler,
-                                    caseSensitive);
+                        if (!inputElement.val() && options.ajax) {
+                            require([options.ajax], function(ajaxHandler) {
+                                updateAjax(e, options, state, originalSelect, ajaxHandler);
                             });
                         } else {
                             // Else - open the suggestions list.
-                            updateSuggestions(inputElement.val(),
-                                inputId,
-                                suggestionsId,
-                                originalSelect,
-                                multiple,
-                                tags,
-                                caseSensitive);
+                            updateSuggestions(options, state, inputElement.val(), originalSelect);
                         }
                     }
                     // We handled this event, so prevent it.
                     e.preventDefault();
                     return false;
                 case KEYS.COMMA:
-                    if (tags) {
+                    if (options.tags) {
                         // If we are allowing tags, comma should create a tag (or enter).
-                        createItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
+                        createItem(options, state, originalSelect);
                     }
                     // We handled this event, so prevent it.
                     e.preventDefault();
                     return false;
                 case KEYS.UP:
                     // Choose the previous active item.
-                    activatePreviousItem(inputId, suggestionsId);
+                    activatePreviousItem(state);
                     // We handled this event, so prevent it.
                     e.preventDefault();
                     return false;
                 case KEYS.ENTER:
-                    var suggestionsElement = $(document.getElementById(suggestionsId));
+                    var suggestionsElement = $(document.getElementById(state.suggestionsId));
                     if ((inputElement.attr('aria-expanded') === "true") &&
                             (suggestionsElement.children('[aria-selected=true]').length > 0)) {
                         // If the suggestion list has an active item, select it.
-                        selectCurrentItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
-                    } else if (tags) {
+                        selectCurrentItem(options, state, originalSelect);
+                    } else if (options.tags) {
                         // If tags are enabled, create a tag.
-                        createItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
+                        createItem(options, state, originalSelect);
                     }
                     // We handled this event, so prevent it.
                     e.preventDefault();
@@ -605,7 +554,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 case KEYS.ESCAPE:
                     if (inputElement.attr('aria-expanded') === "true") {
                         // If the suggestion list is open, close it.
-                        closeSuggestions(inputId, suggestionsId, selectionId);
+                        closeSuggestions(state);
                     }
                     // We handled this event, so prevent it.
                     e.preventDefault();
@@ -615,8 +564,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
         });
         // Handler used to force set the value from behat.
         inputElement.on('behat:set-value', function() {
-            if (tags) {
-                createItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
+            if (options.tags) {
+                createItem(options, state, originalSelect);
             }
         });
         inputElement.on('blur focus', function(e) {
@@ -628,15 +577,15 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             }
             closeSuggestionsTimer = window.setTimeout(function() {
                 if (e.type == 'blur') {
-                    if (tags) {
-                        createItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
+                    if (options.tags) {
+                        createItem(options, state, originalSelect);
                     }
-                    closeSuggestions(inputId, suggestionsId, selectionId);
+                    closeSuggestions(state);
                 }
             }, 500);
         });
-        if (showSuggestions) {
-            var arrowElement = $(document.getElementById(downArrowId));
+        if (options.showSuggestions) {
+            var arrowElement = $(document.getElementById(state.downArrowId));
             arrowElement.on('click', function() {
                 // Prevent the close timer, or we will open, then close the suggestions.
                 inputElement.focus();
@@ -644,52 +593,52 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                     window.clearTimeout(closeSuggestionsTimer);
                 }
                 // Show the suggestions list.
-                updateSuggestions(inputElement.val(), inputId, suggestionsId, originalSelect, multiple, tags, caseSensitive);
+                updateSuggestions(options, state, inputElement.val(), originalSelect);
             });
         }
 
-        var suggestionsElement = $(document.getElementById(suggestionsId));
+        var suggestionsElement = $(document.getElementById(state.suggestionsId));
         suggestionsElement.parent().on('click', '[role=option]', function(e) {
             // Handle clicks on suggestions.
             var element = $(e.currentTarget).closest('[role=option]');
-            var suggestionsElement = $(document.getElementById(suggestionsId));
+            var suggestionsElement = $(document.getElementById(state.suggestionsId));
             // Find the index of the clicked on suggestion.
             var current = suggestionsElement.children('[aria-hidden=false]').index(element);
             // Activate it.
-            activateItem(current, inputId, suggestionsId);
+            activateItem(current, state);
             // And select it.
-            selectCurrentItem(inputId, suggestionsId, selectionId, multiple, originalSelect);
+            selectCurrentItem(options, state, originalSelect);
         });
-        var selectionElement = $(document.getElementById(selectionId));
+        var selectionElement = $(document.getElementById(state.selectionId));
         // Handle clicks on the selected items (will unselect an item).
         selectionElement.on('click', '[role=listitem]', function(e) {
             // Get the item that was clicked.
             var item = $(e.currentTarget);
             // Remove it from the selection.
-            deselectItem(inputId, selectionId, item, originalSelect, multiple);
+            deselectItem(options, state, item, originalSelect);
         });
         // Keyboard navigation for the selection list.
         selectionElement.on('keydown', function(e) {
             switch (e.keyCode) {
                 case KEYS.DOWN:
                     // Choose the next selection item.
-                    activateNextSelection(selectionId);
+                    activateNextSelection(state);
                     // We handled this event, so prevent it.
                     e.preventDefault();
                     return false;
                 case KEYS.UP:
                     // Choose the previous selection item.
-                    activatePreviousSelection(selectionId);
+                    activatePreviousSelection(state);
                     // We handled this event, so prevent it.
                     e.preventDefault();
                     return false;
                 case KEYS.SPACE:
                 case KEYS.ENTER:
                     // Get the item that is currently selected.
-                    var selectedItem = $(document.getElementById(selectionId)).children('[data-active-selection=true]');
+                    var selectedItem = $(document.getElementById(state.selectionId)).children('[data-active-selection=true]');
                     if (selectedItem) {
                         // Unselect this item.
-                        deselectItem(inputId, selectionId, selectedItem, originalSelect, multiple);
+                        deselectItem(options, state, selectedItem, originalSelect);
                         // We handled this event, so prevent it.
                         e.preventDefault();
                     }
@@ -698,7 +647,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             return true;
         });
         // Whenever the input field changes, update the suggestion list.
-        if (showSuggestions) {
+        if (options.showSuggestions) {
             inputElement.on('input', function(e) {
                 var query = $(e.currentTarget).val();
                 var last = $(e.currentTarget).data('last-value');
@@ -709,7 +658,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 // 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);
+                    updateSuggestions(options, state, query, originalSelect);
                     $(e.currentTarget).data('last-value', query);
                 }
             });
@@ -732,17 +681,25 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
          */
         enhance: function(selector, tags, ajax, placeholder, caseSensitive, showSuggestions) {
             // Set some default values.
-            if (typeof tags === "undefined") {
-                tags = false;
+            var options = {
+                selector: selector,
+                tags: false,
+                ajax: false,
+                placeholder: placeholder,
+                caseSensitive: false,
+                showSuggestions: true
+            };
+            if (typeof tags !== "undefined") {
+                options.tags = tags;
             }
-            if (typeof ajax === "undefined") {
-                ajax = false;
+            if (typeof ajax !== "undefined") {
+                options.ajax = ajax;
             }
-            if (typeof caseSensitive === "undefined") {
-                caseSensitive = false;
+            if (typeof caseSensitive !== "undefined") {
+                options.caseSensitive = caseSensitive;
             }
-            if (typeof showSuggestions === "undefined") {
-                showSuggestions = true;
+            if (typeof showSuggestions !== "undefined") {
+                options.showSuggestions = showSuggestions;
             }
 
             // Look for the select element.
@@ -756,39 +713,30 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             originalSelect.hide().attr('aria-hidden', true);
 
             // Find or generate some ids.
-            var selectId = originalSelect.attr('id');
-            var multiple = originalSelect.attr('multiple');
-            var inputId = 'form_autocomplete_input-' + $.now();
-            var suggestionsId = 'form_autocomplete_suggestions-' + $.now();
-            var selectionId = 'form_autocomplete_selection-' + $.now();
-            var downArrowId = 'form_autocomplete_downarrow-' + $.now();
+            var state = {
+                selectId: originalSelect.attr('id'),
+                inputId: 'form_autocomplete_input-' + $.now(),
+                suggestionsId: 'form_autocomplete_suggestions-' + $.now(),
+                selectionId: 'form_autocomplete_selection-' + $.now(),
+                downArrowId: 'form_autocomplete_downarrow-' + $.now()
+            };
+            options.multiple = originalSelect.attr('multiple');
 
-            var originalLabel = $('[for=' + selectId + ']');
+            var originalLabel = $('[for=' + state.selectId + ']');
             // Create the new markup and insert it after the select.
-            var options = [];
+            var suggestions = [];
             originalSelect.children('option').each(function(index, option) {
-                options[index] = { label: option.innerHTML, value: $(option).attr('value') };
+                suggestions[index] = { label: option.innerHTML, value: $(option).attr('value') };
             });
 
             // Render all the parts of our UI.
-            var renderInput = templates.render(
-                'core/form_autocomplete_input',
-                { downArrowId: downArrowId,
-                  inputId: inputId,
-                  suggestionsId: suggestionsId,
-                  selectionId: selectionId,
-                  placeholder: placeholder,
-                  multiple: multiple,
-                  showSuggestions: showSuggestions }
-            );
-            var renderDatalist = templates.render(
-                'core/form_autocomplete_suggestions',
-                { inputId: inputId, suggestionsId: suggestionsId, options: options, multiple: multiple}
-            );
-            var renderSelection = templates.render(
-                'core/form_autocomplete_selection',
-                { selectionId: selectionId, items: [], multiple: multiple}
-            );
+            var context = $.extend({}, options, state);
+            context.options = suggestions;
+            context.items = [];
+
+            var renderInput = templates.render('core/form_autocomplete_input', context);
+            var renderDatalist = templates.render('core/form_autocomplete_suggestions', context);
+            var renderSelection = templates.render('core/form_autocomplete_selection', context);
 
             $.when(renderInput, renderDatalist, renderSelection).done(function(input, suggestions, selection) {
                 // Add our new UI elements to the page.
@@ -796,47 +744,29 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 originalSelect.after(input);
                 originalSelect.after(selection);
                 // Update the form label to point to the text input.
-                originalLabel.attr('for', inputId);
+                originalLabel.attr('for', state.inputId);
                 // Add the event handlers.
-                addNavigation(inputId,
-                    suggestionsId,
-                    downArrowId,
-                    selectionId,
-                    originalSelect,
-                    multiple,
-                    tags,
-                    selector,
-                    ajax,
-                    caseSensitive,
-                    showSuggestions);
+                addNavigation(options, state, originalSelect);
 
-                var inputElement = $(document.getElementById(inputId));
-                var suggestionsElement = $(document.getElementById(suggestionsId));
+                var inputElement = $(document.getElementById(state.inputId));
+                var suggestionsElement = $(document.getElementById(state.suggestionsId));
                 // Hide the suggestions by default.
                 suggestionsElement.hide().attr('aria-hidden', true);
 
                 // If this field uses ajax, set it up.
-                if (ajax) {
-                    require([ajax], function(ajaxHandler) {
+                if (options.ajax) {
+                    require([options.ajax], function(ajaxHandler) {
                         var handler = function(e) {
-                            updateAjax(e,
-                                selector,
-                                inputId,
-                                suggestionsId,
-                                originalSelect,
-                                multiple,
-                                tags,
-                                ajaxHandler,
-                                caseSensitive);
+                            updateAjax(e, options, state, originalSelect, ajaxHandler);
                         };
                         // Trigger an ajax update after the text field value changes.
                         inputElement.on("input keypress", handler);
-                        var arrowElement = $(document.getElementById(downArrowId));
+                        var arrowElement = $(document.getElementById(state.downArrowId));
                         arrowElement.on("click", handler);
                     });
                 }
                 // Show the current values in the selection list.
-                updateSelectionList(selectionId, inputId, originalSelect, multiple);
+                updateSelectionList(options, state, originalSelect);
             });
         }
     };