add UserInputAllowed option, allowing user to input data not in the a…

…utocomplete list
compsult · Aug 17, 2018 · eb6b6c1 · eb6b6c1
1 parent 1269f51
commit eb6b6c1
Show file tree

Hide file tree

Showing 42 changed files with 672 additions and 79 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-## MenuOptions [![Build Status](https://travis-ci.org/compsult/MenuOptions.svg?branch=1.8.3-11)](https://travis-ci.org/compsult/MenuOptions) [![Sauce Test Status](https://saucelabs.com/buildstatus/compsult)](https://saucelabs.com/u/compsult) [![Read The docs](https://readthedocs.org/projects/pip/badge/?version=latest)](http://menuoptions.readthedocs.org/en/latest/) ##
+## MenuOptions [![Build Status](https://travis-ci.org/compsult/MenuOptions.svg?branch=1.9.0.0)](https://travis-ci.org/compsult/MenuOptions) [![Sauce Test Status](https://saucelabs.com/buildstatus/compsult)](https://saucelabs.com/u/compsult) [![Read The docs](https://readthedocs.org/projects/pip/badge/?version=latest)](http://menuoptions.readthedocs.org/en/latest/) ##
 
 #### Input masks and multi-column autocomplete combined
 

diff --git a/dist/css/menuoptions.css b/dist/css/menuoptions.css
@@ -135,19 +135,28 @@ span.helptext {
     font: normal 12px arial;
     color: gray;
 }
-span.err_text {
+span.warn_text {
     position: absolute; 
-    background:url(../imgs/red_x.png) no-repeat center left;
+    background:url(../imgs/Caution.png) no-repeat center left;
+    margin-left: -3px;
     display:inline-block;
     white-space: nowrap;
     font: italic 12px arial;
-    color: red;
+    color: brown;
 }
+ span.err_text { 
+     position: absolute;  
+    background:url(../imgs/red_x.png) no-repeat center left;
+     display:inline-block; 
+     white-space: nowrap; 
+     font: italic 12px arial; 
+     color: red; 
+ } 
 span.mask_match {
     position: absolute; 
     display:inline-block;
     width: 18px; 
-    background:url(../imgs/greencheck.png) no-repeat top left;
+    background:url(../imgs/icons.png) no-repeat top left; background-position: 18px 0px;
 }
 /*--  put clear X in input --*/
 span.clearbtnpos {

diff --git a/dist/css/menuoptions.min.css b/dist/css/menuoptions.min.css
diff --git a/dist/imgs/Caution.png b/dist/imgs/Caution.png
diff --git a/dist/js/jquery.menuoptions.js b/dist/js/jquery.menuoptions.js
@@ -12,7 +12,7 @@
  * @license         Menu Options jQuery widget is licensed under the MIT license
  * @link            http://www.menuoptions.org
  * @docs            http://menuoptions.readthedocs.org/en/latest/
- * @version         Version 1.8.3-11
+ * @version         Version 1.9.0.0
  *
  *
  ******************************************/
@@ -58,6 +58,7 @@ $.widget('mre.menuoptions', {
         // http://menuoptions.readthedocs.org/en/latest/MenuParams.html#showdownarrow 
         ShowDownArrow : "black", // set to None to hide down arrow on menus, else pass in color of arrow
         // http://menuoptions.readthedocs.io/en/latest/SelectParams.html#usevalueforkey
+        UserInputAllowed: false, // if user can enter any value, even if it is not is autocomplete list
         UseValueForKey: false, // if user wants value = text()
         // http://menuoptions.readthedocs.io/en/latest/Masks.html#masks
         Mask : '',
@@ -96,6 +97,7 @@ $.widget('mre.menuoptions', {
 this._cfg={
             curcy:'$',
             no_dt : '\n\nMenuOptions requires the Data parameter to be populated. \n\nSee https://goo.gl/VvHcrZ for details (note: this may be a DataKeyNames error)', 
+            bad_combo : 'You cannot specify UserInputAllowed and a Mask (one or the other)',
             col_cnt : 'MenuOptions requires ColumnCount parameter be > 0',
             inv_data : 'Invalid Data format supplied to menuoptions. See https://goo.gl/VvHcrZ for details',
             rkr_err : 'When using the rocker control, exactly 2 elements need to be supplied to menuoptions',
@@ -121,6 +123,9 @@ this._cfg={
         if (this.options.ColumnCount < 1) {
             return this._validation_fail(this._cfg.col_cnt,'fatal');
         }
+        if (this.options.UserInputAllowed === true && this.options.Mask.length > 0) {
+            return this._validation_fail(this._cfg.bad_combo,'fatal');
+        }
         this._check_for_bootstrap();
         if ( this.options._mask_status.mask_only === false ) {
             // make sure incoming data is in required format
@@ -843,6 +848,10 @@ this._cfg={
                 }
             }
         });
+        if ( matching.length === 0 && this.options.UserInputAllowed === true ) {
+            this.__set_help_msg('no list matches', 'caution');
+            return [];
+        }
         if ( this.options._CurrentFilter.length === 0 ) {
             this.__check_match_results(matching, params.StrToCheck, params.evt);
         }
@@ -865,6 +874,13 @@ this._cfg={
 
     __set_help_msg : function (help_msg, err_or_good) {
         switch ( err_or_good ) {
+            case 'caution':
+                $("span#HLP_"+this.options._ID).show()
+                        .html('<span style="margin-left:16px">'+help_msg+"</span>")
+                        .removeClass('helptext mask_match').addClass('warn_text');
+                this._set_bg_color('err');
+                this.options._mask_status.mask_passed = false;
+                break;
             case 'error':
                 $("span#HLP_"+this.options._ID).show()
                         .html('<span style="margin-left:16px">'+help_msg+"</span>")
@@ -1034,8 +1050,9 @@ this._cfg={
          if ( e.keyCode === $.ui.keyCode.ENTER && $('table.CrEaTeDtAbLeStYlE td.mo').length === 0 ||
                  e.keyCode === $.ui.keyCode.TAB && curVal.length === 0 ) { 
              e.preventDefault(); 
+             var keytype = e.keyCode === $.ui.keyCode.ENTER ? "ENTERKey" : "TABKey";
              this.__exec_trigger({ 'newCode': $('table.CrEaTeDtAbLeStYlE td:first').attr('menu_opt_key'),  
-                         'newVal' : $('table.CrEaTeDtAbLeStYlE td:first').text(), 'type': "ENTERKey" });  
+                         'newVal' : $('table.CrEaTeDtAbLeStYlE td:first').text(), 'type': keytype });  
          } else if (e.keyCode === $.ui.keyCode.TAB ) { 
             if ( curVal.length > 0) {
                 var matched =  this._build_match_ary(e, curVal);
@@ -1649,12 +1666,15 @@ this._cfg={
         }
         var curVal = this.cached['.mo_elem'].val();
          if (/mouseenter|focus|input/.test(e.type) || /keyup/.test(e.type) && e.keyCode === $.ui.keyCode.BACKSPACE) {
-            var matched;
+            var matched = [];
             if ( curVal.length === 0 ) {
                 matched = this.orig_objs;
             } else {
                 matched = this._match_list_hilited({'StrToCheck': curVal, 'chk_key': false, 'case_ins': true, 'evt': e});
             }
+            if ( matched.length === 0 && this.options.UserInputAllowed === true ) {
+                return;
+            }
             if ( curVal.length > this.cached['.mo_elem'].val().length ) {
                 matched = this._matches(this.cached['.mo_elem'].val(), 'partial');
             } else if ( this.options.Mask === '' ) {

diff --git a/dist/js/jquery.menuoptions.min.js b/dist/js/jquery.menuoptions.min.js
diff --git a/docs/source/FAQ.rst b/docs/source/FAQ.rst
@@ -1,7 +1,7 @@
 FAQ
 ===
 
-.. image:: https://travis-ci.org/compsult/MenuOptions.svg?branch=1.8.3-11
+.. image:: https://travis-ci.org/compsult/MenuOptions.svg?branch=1.9.0.0
    :target: https://travis-ci.org/compsult/MenuOptions
 
 .. image:: https://saucelabs.com/buildstatus/compsult

diff --git a/docs/source/SelectParams.rst b/docs/source/SelectParams.rst
@@ -34,6 +34,7 @@ Parameter list for multi-column autocomplete
     `Sort`_,array of strings,"['alpha'|'num', 'desc'|'asc']","['alpha','asc']",false
     TriggerEvent, <deleted>,<as of v1.5.1>,--,--
     `UseValueForKey`_,boolean,"true or false",false,false
+    `UserInputAllowed`_,boolean,"true or false",false,false
     `Width`_,integer,positive integer, width of dropdown, false
 
 Parameters explained for MenuOption multi-column autocomplete
@@ -341,6 +342,18 @@ UseValueForKey
 
     <td menu_opt_key="CA">"CA"</td>. 
 
+.. _UserInputAllowed:
+
+UserInputAllowed
+~~~~~~~~~~~~~~~~
+    options: **true or false**
+
+    UserInputAllowed = true means that 
+    the user can type in anything 
+    OR
+    can choose an autocomplete item from the list
+    (`see a demo that uses UserInputAllowed <http://menuoptions.org/examples/AutocompleteWithUserInput.html>`_ ) 
+
 .. _Width:
 
 Width

diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -51,9 +51,9 @@
 # built documents.
 #
 # The short X.Y version.
-version = "1.8.3-11"
+version = "1.9.0.0"
 # The full version, including alpha/beta/rc tags.
-release = "1.8.3-11"
+release = "1.9.0.0"
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

diff --git a/docs/source/index.rst b/docs/source/index.rst
@@ -6,7 +6,7 @@
 Welcome to MenuOptions
 =====================================================
 
-.. image:: https://travis-ci.org/compsult/MenuOptions.svg?branch=1.8.3-11
+.. image:: https://travis-ci.org/compsult/MenuOptions.svg?branch=1.9.0.0
    :target: https://travis-ci.org/compsult/MenuOptions
 
 .. image:: https://saucelabs.com/buildstatus/compsult