0.9.0 update

Added multiselect, AJAX, disabled support, better change detection,
various improvements

Gruntfile.js

@@ -2,7 +2,7 @@
   minimalect
   http://github.com/groenroos/minimalect
 
-  Copyright (c) 2013 Oskari Groenroos and contributors
+  Copyright (c) 2013-2014 Oskari Groenroos and contributors
   Licensed under the MIT license.
 */
 

README.md

@@ -1,14 +1,26 @@
 minimalect
 ----------
 
-Minimal select replacement for jQuery by [@groenroos](http://twitter.com/groenroos).
+Minimal select replacement for jQuery by [@groenroos](http://twitter.com/groenroos). For usage examples, visit [groenroos.github.io/minimalect](http://groenroos.github.io/minimalect/)
 
 * Replace select elements with a nicer styled control
 * Support for optgroups
 * Filtering choices by typing
 * Keyboard navigation
 * Support for themes
 
+**New in 0.9.0 (28th May 2014)**
+
+* AJAX search support
+* Multiselect support
+* Detects dynamic changes to original element automatically
+* Disabled element support
+* Public methods
+* Optional reset functionality
+* Combobox functionality now optional
+* Less conflict with existing form styles
+* Various bugfixes
+
 ### Usage
 
 Include `jquery.minimalect.min.js` after you load jQuery (1.7 or newer). Then simply do;
@@ -21,6 +33,32 @@ Remember to also include the stylesheet (SCSS and minified CSS available);
 
 The default style is very understated, so it's easy to modify to better suit your needs. By default, no graphics are used; the arrow symbols are Unicode characters. Please be advised that not all typefaces on all devices support this, and depending on your target device, you may want to replace it with pre-rendered graphics.
 
+
+#### AJAX functionality
+
+You can also use Minimalect as a way to display search results from an AJAX call. For this, pass the `ajax` setting with the URL to the backend. Minimalect will send a POST request with the key `q` containing the value of the user's search. Minimalect will expect a JSON response with an array of objects, each having two keys: `name` and `value`.
+
+Note, that the response received from the AJAX service will also modify choices available in the original `select` element, so that the selected choice may be appropriately sent with the rest of the form. The original contents of the `select` element are not restored if the user doesn't pick anything.
+
+
+#### Programmatically changing the selected choice
+
+If you wish to change the current value of the select, you can simply make your changes to the original element like you would normally with `.val()`. Minimalect will take it from there, providing that the `live` setting is set to `true`, like it is by default.
+
+
+#### Programmatically changing the available choices
+
+Since version 0.9.0, Minimalect will automatically recognize if the original options are changed dynamically, and the changes are reflected in the user-facing element. For this, Minimalect uses the MutationObserver, which has [spotty cross-browser support](http://caniuse.com/#feat=mutationobserver). For support in IE10 and earlier, Firefox 13 and earlier, Chrome 26 and earlier and Safari 5.1 and earlier, either use a [polyfill](https://github.com/Polymer/MutationObservers), or call the `update` method manually.
+
+
+#### Available methods
+
+You can call various Minimalect methods to control it programmatically. You can call methods by passing the method name as a string in a second call, e.g. `.minimalect("method")`
+
+* `destroy` — remove all the features of Minimalect and restore the original select. *Warning:* this will unhook any `change`, `focus` or `blur` events you may have connected to the `select` via `.on()`
+* `update` — refresh Minimalect's displayed choices from the original `select`. Minimalect will do this automatically in modern browsers. See above for details.
+
+
 #### Available options
 
 You can pass an object as a parameter for the `.minimalect()` call, to override the default settings.
@@ -30,23 +68,34 @@ You may edit all the CSS classnames that Minimalect uses so that they don't coll
 ##### Settings
 
 * `theme` — the currently used theme. Applied as a class to the main div element. Default: *(empty)*
+* `transition` — which effect should be used for showing and hiding the dropdown. Default: *fade*
+* `transition_time` — how long the effect for showing and hiding the dropdown should take, in milliseconds. Default: *150*
+* `remove_empty_option` — whether options with empty values should be removed. Default: `true`
+* `show_reset` — whether to show a reset button to deselect a selected choice. Default: `false`
+* `searchable` — whether the combobox functionality is enabled or not. Default: `true`
+* `ajax` — URL of an AJAX resource for external search results. See above for details. Will not have an effect if `searchable` is `false`. Default: `null`
+* `live` — whether Minimalect should automatically detect value changes to the original `select`. Creates an interval that runs indefinitely every 100 ms; may interfere with the DOM inspector. Default: `true`
+* `debug` — whether Minimalect should explain in the console what it's doing. Useful for debugging. Default: `false`
 
 ##### Messages
 
-* `placeholder` — the default text displayed whenever no choice has been selected. Default: *Select a choice*
+* `placeholder` — the default text displayed whenever no choice has been selected. Set to `null` to inherit the placeholder from the value of the first option. Default: *Select a choice*
 * `empty` — message displayed to the user when no choice matched his filter search term. Default: *No results matched your keyword.*
+* `error` — message displayed to the user when an AJAX request fails for any reason. Default: *There was a problem with the request.*
 
 ##### Classes
 
 * `class_container` — classname for the main div element. Default: *minict_wrapper*
 * `class_group` — classname for a list item that represents an optgroup label. Default: *minict_group*
 * `class_empty` — classname for the "No results" message when filtering produces no results. Default: *minict_empty*
 * `class_active` — classname that is applied to the main div element whenever the dropdown is visible. Default: *active*
+* `class_disabled` — classname that is applied to list items or the whole select, if they are disabled. Default: *disabled*
 * `class_selected` — classname applied to the list item in the dropdown that is currently selected. Default: *selected*
 * `class_hidden` — classname applied to list items in the dropdown that do not match the filter. Default: *hidden*
 * `class_highlighted` — classname applied to the list item that is currently highlighted when the user uses keyboard navigation. Default: *highlighted*
 * `class_first` — classname that corresponds to the first visible list item in the dropdown, including optgroup labels and the "No results" message. Helpful when rounding corners in CSS. Default: *minict_first*
 * `class_last` — classname that corresponds to the last visible list item in the dropdown, including optgroup labels and the "No results" message. Helpful when rounding corners in CSS. Default: *minict_last*
+* `class_reset` — classname applied to the optional reset element. Default: *minict_reset*
 
 ##### Callbacks
 
@@ -61,13 +110,6 @@ You may edit all the CSS classnames that Minimalect uses so that they don't coll
     * `match`; a boolean parameter, `true` if there was matches, `false` if no matches are found.
 
 
-#### Programmatically changing the selected choice
-
-If you wish to change the current value of the select, you can simply make your changes to the original element like you would normally and then trigger the `change` event. Minimalect will take it from there. Like so;
-
-    $("#myselect").val("newvalue").change();
-
-
 ### Bugs & Support
 
 Developed by [@groenroos](http://twitter.com/groenroos). Please list all bugs and feature requests in the [Github issue tracker](https://github.com/groenroos/minimalect/issues).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "minimalect",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "main": "jquery.minimalect.js",
   "ignore": [
     "Gruntfile.js",

jquery.minimalect.css

@@ -1,9 +1,23 @@
+/************************************
+          MINIMALECT 0.9
+  A minimalistic select replacement
+
+ jQuery 1.7+ required.
+ Developed by @groenroos
+ http://www.groenroos.fi
+
+ Github: http://git.io/Xedg9w
+
+ Licensed under the MIT license.
+
+************************************/
 .minict_wrapper {
   font-family: "Segoe UI", Segoe, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
   color: #333;
   background: #fff;
   position: relative;
   width: 300px;
+  height: 35px;
   height: 2.2rem;
   border: 1px solid #e5e5e5;
   border-radius: 3px;
@@ -14,52 +28,87 @@
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }
+  .minict_wrapper.disabled {
+    background: #f5f5f5;
+    text-shadow: 0 1px 0 #fff; }
+    .minict_wrapper.disabled span {
+      color: #bbb !important; }
   .minict_wrapper:after {
     content: "\25BC";
     display: block;
     position: absolute;
+    height: 33px;
+    width: 33px;
     height: 2.1rem;
     width: 2.1rem;
     top: 0;
     right: 0;
+    font-size: 10px;
     font-size: 0.6rem;
+    line-height: 32px;
     line-height: 1.9rem;
     text-align: center;
     color: #555; }
   .minict_wrapper.active:after {
     content: "\25B2"; }
-  .minict_wrapper input {
+  .minict_wrapper.disabled:after {
+    color: #bbb; }
+  .minict_wrapper span {
+    display: block;
     border: 0;
     outline: none;
     background: none;
     font-family: "Segoe UI", Segoe, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
     color: #333;
+    font-size: 16px;
     font-size: 1rem;
-    height: 1.9rem;
-    padding: 0 2.2rem 0 0.4rem;
+    height: 32px;
+    height: 2.0rem;
+    line-height: 23px;
+    line-height: 1.5rem;
+    padding: 4px 53px 0 6px;
+    padding: 4px 3.4rem 0 0.4rem;
     cursor: default;
-    width: 100%; }
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+    .minict_wrapper span:empty:before {
+      content: attr(data-placeholder);
+      color: #ccc;
+      line-height: 23px;
+      line-height: 1.5rem; }
   .minict_wrapper ul {
     display: none;
     list-style: none;
     padding: 0;
-    margin: 0;
+    margin: 0 -1px;
     position: absolute;
     width: 100%;
+    width: -webkit-calc(100% + 2px);
+    width: -moz-calc(100% + 2px);
+    width: calc(100% + 2px);
     border: 1px solid #e5e5e5;
-    border-radius: 3px;
-    top: 2rem;
+    border-top: 1px solid #f9f9f9;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    top: 33px;
+    top: 2.0rem;
     left: 0;
+    max-height: 350px;
     max-height: 22rem;
     overflow-y: auto;
     z-index: 999999; }
     .minict_wrapper ul li {
       list-style: none;
       font-size: 1rem;
+      padding: 0 10px;
       padding: 0 0.7rem;
       cursor: pointer;
       background: #fff;
+      height: 35px;
       height: 2.2rem;
+      line-height: 32px;
       line-height: 2rem; }
       .minict_wrapper ul li:hover {
         background: #fcfcfc;
@@ -74,17 +123,50 @@
         background: #fff !important;
         color: #bbb;
         text-align: center;
+        font-size: 14px;
         font-size: 0.9rem;
+        height: 55px;
         height: 3.5rem;
+        line-height: 50px;
         line-height: 3.3rem; }
+      .minict_wrapper ul li.disabled {
+        cursor: default;
+        background: #fff !important;
+        color: #bbb; }
       .minict_wrapper ul li.selected {
         color: #819a9a;
-        background: #f9fcff; }
+        background: #f8f9f9; }
       .minict_wrapper ul li.highlighted {
         color: #fff;
         background: #819a9a; }
       .minict_wrapper ul li.hidden {
         display: none; }
+  .minict_wrapper .minict_reset {
+    color: #A9A9A9;
+    bottom: 0;
+    display: none;
+    font-size: 18px;
+    font-size: 1.1rem;
+    line-height: 30px;
+    line-height: 1.9rem;
+    position: absolute;
+    right: 35px;
+    right: 2.2rem;
+    text-align: center;
+    top: 0;
+    text-decoration: none;
+    width: 20px;
+    width: 1.2rem;
+    -webkit-transition: all 0.35s ease-in-out;
+    transition: all 0.35s ease-in-out; }
+    .minict_wrapper .minict_reset:hover {
+      color: #e0e0e0;
+      -webkit-transition: all 0.15s ease-in-out;
+      transition: all 0.15s ease-in-out; }
+    .minict_wrapper .minict_reset:active {
+      color: #636363; }
+  .minict_wrapper.disabled .minict_reset {
+    display: none; }
 
 .minict_wrapper.bubble {
   -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
@@ -136,3 +218,5 @@
     .minict_wrapper.bubble ul li.minict_last {
       border-bottom-left-radius: 6px;
       border-bottom-right-radius: 6px; }
+  .minict_wrapper.bubble .minict_reset {
+    width: 30px; }