v1.4.0 (#17)

* v1.4.0 * v1.4.0 * v1.4.0 * Update README.md
andreww1011 · Jun 15, 2022 · 9a4c7ae · 9a4c7ae
1 parent 66acc6f
commit 9a4c7ae
Show file tree

Hide file tree

Showing 16 changed files with 755 additions and 331 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # filter-multi-select
 <p>Multiple select dropdown with filter jQuery plugin.</p>
 
-<p><a href="https://jsfiddle.net/andreww1011/c4gr5wqa/">JSFiddle</a></p>
+<p><a href="https://jsfiddle.net/andreww1011/s5rp8buv/">JSFiddle</a></p>
 
 <p>Improve the useability of HTML <code>&ltselect&gt</code> elements:
 <ul>
@@ -66,6 +66,7 @@
     <li><code>filterText</code> - text to show in filter when empty.  <i>default="Filter"</i></li>
     <li><code>selectAllText</code> - label for the select all dropdown item.  <i>default="Select All"</i></li>
     <li><code>labelText</code> - label to display in the main dropdown.  <i>default=""</i></li>
+    <li><code>selectionLimit</code> - limit the number of items able to be selected.  Choosing <small><code>1</code></small> or omitting the <small><code>multiple</code></small> attribute turns this into a single select.  A value of <small><code>0</code></small> means no limit.  <i>default="0"</i></li>
     <li><code>caseSensitive</code> - whether filtering is case-sensitive.  <i>default=false</i></li>
     <li><code>allowEnablingAndDisabling</code> - whether programmatically toggling disabled is permitted.  <i>default=true</i></li>
     <li><code>items</code> - array of additional items to append to options in dropdown.  Each array entry should have the form: <br />

diff --git a/dist/FilterMultiSelect.js b/dist/FilterMultiSelect.js
diff --git a/dist/FilterMultiSelect.js.map b/dist/FilterMultiSelect.js.map
diff --git a/dist/example.html b/dist/example.html
@@ -79,7 +79,7 @@ <h4 class="col-12">Default Dropdown</h4>
         <h4 class="col-12">Dropdown with pre-sets and case-sensitive filtering</h4>
       </div>
       <div class="form-group row">
-        <!-- <label class="col-2 col-form-label" for="shapes">Shapes</label> -->
+        <label class="col-2 col-form-label" for="shapes"></label>
         <div class="col-10">
           <select multiple name="shapes" id="shapes">
             <option value="1" selected>Square</option>
@@ -195,6 +195,39 @@ <h4 class="col-12">Dropdown with items added via js</h4>
           </select>
         </div>
       </div>
+      <div class="row">
+        <h4 class="col-12">Single Select</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="colors">Colors</label>
+        <div class="col-10">
+          <select name="colors" id="colors">
+            <option value="1">Red</option>
+            <option value="2">Orange</option>
+            <option value="3">Yellow</option>
+            <option value="4" disabled>Green</option>
+            <option value="5">Blue</option>
+            <option value="6">Indigo</option>
+            <option value="7">Violet</option>
+          </select>
+        </div>
+      </div>
+      <div class="row">
+        <h4 class="col-12">Limit Selection Count</h4>
+      </div>
+      <div class="form-group row">
+        <label class="col-2 col-form-label" for="trees">Trees</label>
+        <div class="col-10">
+          <select multiple name="trees" id="trees">
+            <option value="1">Oak</option>
+            <option value="2" selected disabled>Pine</option>
+            <option value="3" selected >Maple</option>
+            <option value="4" disabled>Poplar</option>
+            <option value="5">Beech</option>
+            <option value="6">Magnolia</option>
+          </select>
+        </div>
+      </div>
       <button type="submit">Submit Form</button>
     </form>
     <div class="container">
@@ -273,6 +306,10 @@ <h4 class="col-12">Dropdown with items added via js</h4>
                   ["Berlin","d",true,true],
                  ],
         });
+        var colors = $('#colors').filterMultiSelect();
+        var trees = $('#trees').filterMultiSelect({
+          selectionLimit: 3,
+        });
         $('#jsonbtn1').click((e) => {
            var b = true;
            $('#jsonresult1').text(JSON.stringify(getJson(b),null,"  "));