Added option to customize items box markup, fix for expandToItemText

Author: lcdsantos

img/browser-icons.png

@@ -83,6 +83,23 @@
 .copy a:hover {
   color: #F60;
 }
+
+.customOptions .selectricItems .ico {
+  display: inline-block;
+  vertical-align: middle;
+  zoom: 1;
+  *display: inline;
+  height: 30px;
+  width: 30px;
+  margin: 0 6px 0 0;
+  background: url(img/browser-icons.png) no-repeat;
+}
+
+.customOptions .selectricItems .ico-chrome  { background-position: 0 0; }
+.customOptions .selectricItems .ico-firefox { background-position: -30px 0; }
+.customOptions .selectricItems .ico-ie      { background-position: -60px 0; }
+.customOptions .selectricItems .ico-opera   { background-position: -90px 0; }
+.customOptions .selectricItems .ico-safari  { background-position: -120px 0; }
 </style>
 <link rel="stylesheet" href="selectric.css">
 </head>
@@ -294,7 +311,7 @@ <h2>How to use</h2>
 });</code></pre>
 
     <h2>Options</h2>
-    <p>You can pass a options object as the first parameters when you call the plugin. For example:</p>
+    <p>You can pass an options object as the first parameter when you call the plugin. For example:</p>
     <pre><code class="language-javascript">$('select').selectric({
   maxHeight: 200
 });</code></pre>
@@ -310,19 +327,19 @@ <h2>Options</h2>
         <td>onOpen</td>
         <td><pre><code>function() {}</code></pre></td>
         <td>Function</td>
-        <td>Function called when select options is opened</td>
+        <td>Function called when select options open</td>
       </tr>
       <tr>
         <td>onChange</td>
         <td><pre><code>function() {}</code></pre></td>
         <td>Function</td>
-        <td>Function called when select options is changed</td>
+        <td>Function called when select options change</td>
       </tr>
       <tr>
         <td>onClose</td>
         <td><pre><code>function() {}</code></pre></td>
         <td>Function</td>
-        <td>Function called when select options is closed</td>
+        <td>Function called when select options close</td>
       </tr>
       <tr>
         <td>maxHeight</td>
@@ -334,7 +351,7 @@ <h2>Options</h2>
         <td>keySearchTimeout</td>
         <td><pre><code>500</code></pre></td>
         <td>Integer</td>
-        <td>After this time without pressing any key, the search string is reseted</td>
+        <td>After this time without pressing any key, the search string is reset</td>
       </tr>
       <tr>
         <td>arrowButtonMarkup</td>
@@ -380,7 +397,15 @@ <h2>Options</h2>
   camelCase: true
 }</code></pre></td>
         <td>Object</td>
-        <td>Custom classes</td>
+        <td>Custom classes. <br> Every class in 'postfixes' should be separate with a space and follow this exact order: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive'</td>
+      </tr>
+      <tr>
+        <td>optionsItemBuilder</td>
+        <td><pre><code>{text}</code></pre></td>
+        <td>String or Function</td>
+        <td>Define how each option should be rendered inside its &lt;li&gt; element. <br><br>
+        If it's a string, all keys wrapped in brackets will be replaced by the respective values in itemData. Available keys are: 'value', 'text', 'slug', 'disabled'. <br><br>
+        If it's a function, it will be called with the following parameters: (itemData, element, index). The function must return a string, no keys will be replaced in this method.</td>
       </tr>
     </table>
 
@@ -469,6 +494,15 @@ <h2>Demo</h2>
       <option value="orange">Orange</option>
     </select>
 
+    <select class="customOptions">
+      <option value="">Select with icons</option>
+      <option value="firefox">Firefox</option>
+      <option value="chrome">Chrome</option>
+      <option value="safari">Safari</option>
+      <option value="ie">Internet Explorer</option>
+      <option value="opera">Opera</option>
+    </select>
+
     <select disabled>
       <option value="">Select disabled</option>
       <option value="apple">Apple</option>
@@ -571,6 +605,12 @@ <h2>Demo</h2>
 <script src="js/jquery.selectric.js"></script>
 <script>
   $(function(){
+    $('.customOptions').selectric({
+      optionsItemBuilder: function(itemData, element, index){
+        return element.val().length ? '<span class="ico ico-' + element.val() +  '"></span>' + itemData.text : itemData.text;
+      }
+    });
+
     $('select, .select').selectric();
   });
 </script>

index.html

@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric Ϟ v1.6.6 - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric Ϟ v1.6.7 - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2014 Leonardo Santos; Dual licensed: MIT/GPL
  *
@@ -37,6 +37,8 @@
 
         return s;
       },
+      // https://gist.github.com/atesgoral/984375
+      format = function(f){var a=arguments;return(""+f).replace(/{(\d+|(\w+))}/g,function(s,i,p){return p&&a[1]?a[1][p]:a[i]})},
       init = function(element, options) {
         var options = $.extend(true, {
               onOpen: $.noop,
@@ -53,7 +55,8 @@
                 prefix: 'selectric',
                 postfixes: 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive',
                 camelCase: true
-              }
+              },
+              optionsItemBuilder: '{text}', // function(itemData, element, index)
             }, options),
             customClass = options.customClass,
             postfixes = customClass.postfixes.split(' '),
@@ -63,11 +66,10 @@
         if (options.disableOnMobile && /android|ip(hone|od|ad)/i.test(navigator.userAgent)) return;
 
         // generate classNames for elements
-        while (currPostfix = postfixes.shift())
-          arrClasses.push(customClass.camelCase ?
-            customClass.prefix + currPostfix :
-            (customClass.prefix + currPostfix).replace(/([A-Z])/g, "-$&").toLowerCase()
-          );
+        while (currPostfix = postfixes.shift()){
+          var c = customClass.prefix + currPostfix;
+          arrClasses.push(customClass.camelCase ? c : c.replace(/([A-Z])/g, "-$&").toLowerCase());
+        }
 
         var $original = $(element),
             _input = $('<input type="text" class="' + arrClasses[0] + '"/>'),
@@ -109,7 +111,8 @@
             $options.each(function(i){
               var $elm = $(this),
                   optionText = $elm.html(),
-                  selectDisabled = $elm.prop('disabled');
+                  selectDisabled = $elm.prop('disabled'),
+                  itemBuilder = options.optionsItemBuilder;
 
               selectItems[i] = {
                 value: $elm.val(),
@@ -118,7 +121,10 @@
                 disabled: selectDisabled
               };
 
-              _$li += '<li class="' + (i == currValue ? selectStr : '') + (i == optionsLength - 1 ? ' last' : '') + (selectDisabled ? ' disabled' : '') + '">' + optionText + '</li>';
+              _$li += format('<li class="{1}">{2}</li>',
+                        $.trim([i == currValue ? selectStr : '', i == optionsLength - 1 ? 'last' : '', selectDisabled ? 'disabled' : ''].join(' ')),
+                        $.isFunction(itemBuilder) ? itemBuilder(selectItems[i], $elm, i) : format(itemBuilder, selectItems[i])
+                      );
             });
 
             $items.html(_$li + '</ul>');
@@ -135,8 +141,6 @@
               $(this).toggleClass(arrClasses[7]);
             });
 
-            _input.prop('disabled', false);
-
             // Click on label and :focus on original select will open the options box
             options.openOnHover && $wrapper.on('mouseenter' + bindSufix, _open);
 
@@ -153,7 +157,7 @@
               }
             }
 
-            _input.off().on({
+            _input.prop('disabled', false).off().on({
               keypress: _handleSystemKeys,
               keydown: function(e){
                 _handleSystemKeys(e);
@@ -231,7 +235,7 @@
 
             // Set a really long width for $outerWrapper
             $outerWrapper.width(9e4);
-            finalWidth = itemsWidth;
+            finalWidth = $items.width();
             // Set scroll bar to auto
             $items.css('overflow', '');
             $outerWrapper.width('');
@@ -256,12 +260,10 @@
           isOpen = true;
           itemsHeight = $items.outerHeight();
 
-          _isInViewport();
-
           // Give dummy input focus
           _input.val('').is(':focus') || _input.focus();
 
-          $doc.on(clickBind, _close);
+          $doc.on(clickBind, _close).on('scroll' + bindSufix, _isInViewport);
 
           // Delay close effect when openOnHover is true
           if (options.openOnHover){
@@ -280,11 +282,8 @@
 
         // Detect is the options box is inside the window
         function _isInViewport() {
-          if (isOpen){
             _calculateOptionsDimensions();
             $items.css('top', ($outerWrapper.offset().top + $outerWrapper.outerHeight() + itemsHeight > $win.scrollTop() + $win.height()) ? -itemsHeight : '');
-            setTimeout(_isInViewport, 100);
-          }
         }
 
         // Close the select options box

js/jquery.selectric.js

@@ -1,6 +1,6 @@
 {
   "name": "jquery-selectric",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "devDependencies": {
     "grunt": "~0.4.4",
     "grunt-contrib-uglify": "~0.4.0"

js/jquery.selectric.min.js

@@ -10,7 +10,7 @@
         "input",
         "ui"
     ],
-    "version": "1.6.6",
+    "version": "1.6.7",
     "author": {
         "name": "Leonardo Santos",
         "email": "leocs.1991@gmail.com"