MenuOptions/index.html at master · compsult/MenuOptions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html>
<head>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments)};
     gtag('js', new Date());
     gtag('config', 'UA-48343361-2');
   </script>
	<meta charset="utf-8">
	<title>MenuOptions | Input masks and multi-column autocomplete combined </title>
    <meta name="description" content="MenuOptions - Input masks and multi-column autocomplete combined ">
    <meta name="keywords"    content="multi-column autocomplete, input masks, input mask, masked input, input, single click data entry">

    <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="./dist/js/jquery.menuoptions.min.js"></script>
    <link rel="stylesheet" type="text/css" href="examples/css/style.css?v_2339">
    <link rel="stylesheet" type="text/css" href="./dist/css/menuoptions.css?v_1820">
    <script src="examples/js/bootstrap.min.js"></script>
    <link href="examples/css/bootstrap.min.css" rel="stylesheet">
    <script src="examples/js/ie10-viewport-bug-workaround.js"></script>
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
   <script> var te = te || {}; te.root="examples/"; te.scroll=true; </script>
   <link rel="icon" href="examples/imgs/favicon.ico">
   <script src="examples/js/examples_bs.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-48343361-2"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
           gtag('config', 'UA-48343361-2');
   </script>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
                hljs.highlightBlock(block);
        });
        $( "#tabs" ).tabs();
    });
    </script>

</head>
<body>
    <div class="navbar-wrapper">
      <div class="container-fluid">

        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a href="/"><img style="display:block;" src="examples/imgs/menuoptions_inv.png"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
              <ul class="nav navbar-nav">
                <li><a id=examplemenu class=examplemenu href="#">All examples</a></li>
                <li><a id=docmenu class=docmenu href="#">Documentation</a></li>
                <li><a id=dwnldmenu class=dwnldmenu href="#">Download</a></li>
                <li><a id=changelog class=changelog href="#">Change log</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1 style='margin-left:90px; font-size:28px;'>MenuOptions - input masks combined with multi-column autocomplete</h1>
            </div>
        </div>
        <div class="row">
            <div id=menu_column class="visible-lg visible-md col-lg-2 col-md-2">
            <p class=menu_left>Menu Examples</p>
            <a class=underl_sm href=examples/QuickStartMenu.html>Quick start menu</a><br>
            <a class=underl_sm href=examples/MenusBottom.html>Drop down menus</a></br>
            <a class=underl_sm href=examples/RightMenu.html>Right side menus</a><br>
            <p class=menu_left>Autcomplete Examples</p>
            <a class=underl_sm href=examples/QuickStartSelect.html>Quick start autcomplete</a><br>
            <a class=underl_sm href=examples/QuickStartSelect.html?bad_data>Autocomplete (bad data)</a><br>
            <a class=underl_sm href=examples/AutocompleteWithUserInput.html>Autocomplete (user input)</a></br>
            <a class=underl_sm href=examples/SelectWithImages.html>Autocomplete (with images)</a><br>
            <a class=underl_sm href=examples/Serialize.html>Serialize (re_serialize)</a><br>
            <a class=underl_sm href=examples/MultiSelect.html>Multiple autcomplete lists</a><br>
            <a class=underl_sm href=examples/ReloadMenuOptions.html>Dynamically reloading</a><br>
            <p class=menu_left>Rocker Examples</p>
            <a class=underl_sm href=examples/Rocker.html>Rocker switch</a><br>
            <p class=menu_left>Masks</p>
            <a class=underl_sm href=examples/MaskCombos.html>Masks and autcomplete list</a><br>
            <a class=underl_sm href=examples/Masks.html>Masks types</a><br>
            <p class=menu_left>All widgets</p>
            <a class=underl_sm href=examples/combined.html>All options</a><br>
            <p class=menu_left>Download</p>
            <a class=underl_sm href="https://github.com/compsult/MenuOptions">github</a><br>
            <a class=underl_sm href="https://www.npmjs.com/package/menuoptions">npm</a><br>
            <div class="row"><div class="col-lg-12" style='height:24px'>
                <a href="https://travis-ci.org/compsult/MenuOptions"><img src="https://travis-ci.org/compsult/MenuOptions.svg?branch=1.7.1-2"></a>
            </div></div>
            <div class="row"><div class="col-lg-12" style='height:24px'>
                <a href="https://saucelabs.com/u/compsult"><img src="https://saucelabs.com/buildstatus/compsult" alt="Sauce Test Status"/></a>
            </div></div>
            <div class="row"><div class="col-lg-12" style='height:24px'>
                <a href="http://menuoptions.readthedocs.org/en/latest/"><img src="https://readthedocs.org/projects/menuoptions/badge/?version=latest" alt="ReadTheDocs Status"/></a>
            </div></div>
            </div>
            <div id=main_column class="col-md-10 col-xs-10">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-xs-12"> </div>
                    <h2 style='font-size:22px;text-align:left'> What it looks like:</h2>
                     <a class=underl href='examples/MaskCombos.html'><img src="http://www.menuoptions.org/examples/imgs/overview2.gif" alt="alt text" title="input masks and multi-column autcomplete combination" /></a>
                     <h2 style='font-size:22px;text-align:left'>Installation</h2>
                    <pre><code class="javascript" style='text-align:left'>
                        npm install menuoptions
                                -- or --
                        git clone https://github.com/compsult/MenuOptions.git
                    </code></pre>
                    <a class=underl_sm href='http://menuoptions.readthedocs.org/en/latest/QuickStart.html'>(more detailed install instructions</a>
                    <h2 style='font-size:22px;text-align:left'>Features:</h2>
                    <ul style="list-style:none">
                        <li class=left_img><a style='line-height:40px' href='examples/Masks.html'>Input masking</a></li>
                        <ul style="list-style:circle">
                            <li><p><a href="http://menuoptions.readthedocs.io/en/latest/Masks.html#how-pre-defined-masks-work">user defined masks</a> (via user supplied RegExp) and <a href="http://menuoptions.readthedocs.io/en/latest/Masks.html#id2">pre-defined masks
                          <li><p>error messages that explain why the input key is invalid</p></li>
                          <li><p>hotkeys a single key can fill a field (e.g., <code class=mo>t</code> fills in todays date in date fields)</p></li>
                        </ul>
                        <li class=left_img><a style='line-height:40px' href='examples/ReloadMenuOptions.html'>Multi column autocomplete</a></li>
                        <ul style="list-style:circle">
                            <li><p>intelligent autocomplete (characters not in any autcomplete list item are automatically removed, saving keystrokes)</p></li>
                            <li><p>mouseover filtering lets user reduce choices by moving their mouse over a filter element</p></li>
                            <li><p><a class=underl_sm href='http://menuoptions.readthedocs.org/en/latest/FAQ.html#what-do-you-mean-auto-configuration'>auto-configuration</a></p</li>
                        </ul>
                        <li class=left_img><a style='line-height:40px' href='examples/Rocker.html'>Rocker control</a></li>
                        <ul style="list-style:circle">
                            <li><p>Binary options (true/false, yes/no, etc) that never hide a choice</p></li>
                        </ul>
                        <li class=left_img><a style='line-height:40px' href='examples/MenusBottom.html'>Menus</a></li>
                        <ul style="list-style:circle">
                            <li><p>Built from JSON</p></li>
                            <li><p>mouseover filtering</p></li>
                        </ul>
                    </ul>
                    <h2 style='font-size:22px;text-align:left'>Other benefits:</h2>

                    <ul style="list-style:none">
                        <li class=left_img><p>offers the ability to combine multi column autocomplete and input mask functionality</p></li>
                        <li class=left_img><p>uses color highlighting to show autocomplete matches </p></li>
                        <li class=left_img><p>it can utilize <a href='http://menuoptions.readthedocs.io/en/latest/SelectParams.html#id3'>data</a> from a variety of JSON types (array, array of arrays, single object, array of objects)</p></li>
                        <li class=left_img><p>the value associated with the label string is saved in the input element automatically
                        (in the <a href='http://menuoptions/docs/build/html/FAQ.html#what-is-the-menu-opt-key'>menu_opt_key</a> - no need to manually update a hidden field)</p></li>
                    </ul>

                    <h2 class=lft> Notes: </h2>
                    <h4 style='text-align:left;'> 1 - <a class=gr href=https://github.com/compsult/MenuOptions>MenuOptions</a> documentation has been moved to <a class=gr href='http://menuoptions.readthedocs.org/en/latest/'>ReadTheDocs </a></h4>
                    <h4 style='text-align:left;'> 2 - It is strongly advised to use the latest release of MenuOptions, for latest features and bug fixes</h3><br>
                    <h2 class=lft>Getting started with input masks</h2>

                    <p><a href="examples/Masks.html">See the demo</a></p>

                    <pre><code class="javascript" style='text-align:left'>
                        $('input#MdYtest').menuoptions({
                            "ClearBtn": true,
                            "Mask": "Mon DD, YYYY"
                        });
                    </code></pre>

                    <a href="examples/Masks.html"><img src="examples/imgs/masks.png" alt="input mask " title="input mask example" /></a>

                    <h2 class=lft>Getting started with a simple multi-column autocomplete</h2>

                    <p><a href="examples/QuickStartSelect.html">See the demo</a></p>

                    <pre><code class="javascript" style='text-align:left'>
                    var Data = [ "January","February","March","April","May","June","July",
                                "August","September","October","November","December" ];

                    $('input#selecttest').menuoptions({
                        "Data": Data
                    });
                    </code></pre>
                    <a href="examples/QuickStartSelect.html">
                    <img src="examples/imgs/SimpleSelect.jpg" alt="simple multi-column autocomplete example" title="simple multi-column autocomplete example" /></a>

                    <h2 class=lft>Getting started with a simple menu</h2>

                    <p><a href="examples/QuickStartMenu.html">See the demo</a></p>

                    <pre><code class="javascript" style='text-align:left'>
                    var Data =  [ {"javascript": function() { alert('Run some javascript'); }},
                                {"Google": "http://www.google.com"},
                                {"Yahoo": "http://www.yahoo.com"}];

                    $('button[id$="menutest"]').menuoptions({
                                "Data": Data,
                                "MenuOptionsType": "Navigate", // Navigate is for menus
                            });
                    </code></pre>
                    <a href="examples/QuickStartMenu.html">
                    <img src="examples/imgs/SimpleMenu.jpg" alt="simple menu example" title="simple menu example" /></a>

                    <h2 class=lft>Autocomplete with images</h2>
                    <p><a href="examples/SelectWithImages.html">See the demo</a></p>

                    <a href="examples/SelectWithImages.html"><img src="examples/imgs/AutoCompWithImgs.jpg" alt="autocomplete with images" title="autocomplete with images" /></a>


                    <h2 class=lft>Mouseover filtering with dividers</h2>
                    <p><a href="examples/MenusBottom.html">See the demo</a></p>
                    <a href="examples/MenusBottom.html"><img src="examples/imgs/MenuWithMOandDivs.jpg" alt="mouseover with dividers" title="mouseover with dividers" /></a>

                    <h2 class=lft>Dynamic reloading of a MenuOptions multi-column autocomplete</h2>

                    <p><a href="examples/ReloadMenuOptions.html">See the demo</a></p>

                    <p>In this case, the user selects a start time and the end time will be modified to only display<br />
                    the start time plus 1 hour and 30 minutes later<br /></p>

                    <a href="examples/ReloadMenuOptions.html"><img src="examples/imgs/Reload.png" alt="dynamic reload of MenuOptions multi-column autocomplete" title="dynamic reload of MenuOptions multi-column autocomplete" /></a>
                    <h2 class=lft>Using MenuOptions with jQuery's serialize</h2>

                    <p><a href="examples/Serialize.html">See the demo</a></p>

                    <p>If you load MenuOptions multi-column autocomplete using an object, the value will be written into the 'menu_opt_key'
                    attribute.  jQuery's serialize will not pick up the value of a MenuOptions multi-column autocomplete (menu_opt_key).<br /><br />
                    To account for this, wrap serialize() with re_serialize, like this:<br /></p>

                    <pre><code class="javascript" style='text-align:left'>
                        $('input[name=maritalstatus]').menuoptions('re_serialize', $('form#form1').serialize());
                    </code></pre>

                    <a href="examples/Serialize.html"><img src="examples/imgs/re_serialize.png" alt="re_serialize" title="using MenuOptions with serialize() " /></a>

                    <h2 class=lft>Multiple multi-column autocomplete on a page demo </h2>

                    <p><a href="examples/MultiSelect.html">See the demo</a></p>

                    <p> This demo illustrates using the using multiple MenuOptions controls, including the rocker control </p>

                    <a href="examples/MultiSelect.html"><img src="examples/imgs/MultiSelects.png" alt="Multiple Selects" title="using MenuOptions with multiple multi-column autocomplete " /></a>

                    <br />
          </div> <!--  column 2 (main)  -->
        </div> <!--  end container row  -->
     </div> <!--  end container -->

     <div id=page_loaded></div>