refactor createLi and add new features

- adds support for adding custom option text only in the dropdown
- allows creating a separator between options
- refactored the creation of items
- added tests

Signed-off-by: Baylor Rae <baylorrae@gmail.com>

bootstrap-select.js

@@ -120,29 +120,50 @@
         },
 
         createLi: function(template) {
-
-            var _li = [];
-            var _liA = [];
-            var _liHtml = '';
-            var opt_index = null;
-            var _this = this;
-            var _selected_index = this.$element[0].selectedIndex ? this.$element[0].selectedIndex : 0;
+            var _li = [],
+                _liA = [],
+                _liHtml = '',
+                opt_index = null,
+                _this = this,
+                _selected_index = this.$element[0].selectedIndex ? this.$element[0].selectedIndex : 0;
 
             this.$element.find('option').each(function(){
                 _li.push($(this).text());
             });
 
             this.$element.find('option').each(function() {
-                if ($(this).parent().is('optgroup')) {
-                    opt_index = String($(this).parent().index());
-                    var optgroup = $(this).parent();
+              var option = $(this),
+                  optgroup,
+
+                  text, link;
+
+                // create a separator
+                if (option.data('separator') == true) {
+                    _liA.push('<span class="separator"></span>');
+                    return;
+                }
+
+                // does it use custom text
+                if (option.data('option-text') !== undefined ) {
+                    text = option.data('option-text');
+                }else {
+                    text = option.text();
+                }
+
+                // set the link markup
+                link = '<a __CLASS tabindex="-1" href="#">'+text+'</a>';
+
+                // add class for indention
+                if (option.parent().is('optgroup')) {
+                    opt_index = String(option.parent().index());
+                    optgroup = option.parent();
                     for (var i = 0; i < optgroup.length; i++) {
-                        _liA.push('<a class="opt'+opt_index[i]+'" tabindex="-1" href="#">'+$(this).text()+'</a>');
+                        link = link.replace('__CLASS', 'class="opt'+opt_index[i]+'"');
                     }
-
-                } else {
-                    _liA.push('<a tabindex="-1" href="#">'+$(this).text()+'</a>');
                 }
+
+                // push the link and remove the "__CLASS" placeholder
+                _liA.push(link.replace(' __CLASS', ''));
             });
 
             if (_li.length > 0) {

spec/javascripts/selectpicker_spec.js

@@ -0,0 +1,60 @@
+describe("Selectpicker", function() {
+
+  describe("createLi", function() {
+    var bootstrap_select;
+
+    describe("flat options", function() {
+      it("creates a li for each option", function() {
+        bootstrap_select = create_select('<select><option value="sandwhich">Ham and Cheese</option></select>');
+
+        expect(bootstrap_select.find('li').length).toBe(1);
+        expect(bootstrap_select.find('li a').text()).toBe('Ham and Cheese');
+      });
+
+      it("allows custom option text to be set", function() {
+        bootstrap_select = create_select('<select><option value="sandwich" data-option-text="H and C">Ham and Cheese</option></select>');
+
+        expect(bootstrap_select.find('button span').text()).toBe('Ham and Cheese');
+        expect(bootstrap_select.find('li:first').text()).toBe('H and C');
+      });
+
+      it("can create a separator", function() {
+        bootstrap_select = create_select('<select><option data-separator="true">---</option></select>');
+
+        expect(bootstrap_select.find('li:first span')).toHaveClass('separator');
+      });
+    });
+
+    describe("with optgroup", function() {
+      it("adds opt{index} class for indention", function() {
+        bootstrap_select = create_select('<select><optgroup label="Sandwich Choice"><option value="sandwich">Ham and Cheese</option></optgroup><option value="drink">Soda</option></select>');
+
+        expect(bootstrap_select.find('li:first a')).toHaveClass('opt0');
+        expect(bootstrap_select.find('li:last a')).not.toHaveClass('opt0');
+      });
+
+      it("allows custom option text to be set", function() {
+        bootstrap_select = create_select('<select><optgroup label="Sandwich Choice"><option value="sandwich" data-option-text="H and C">Ham and Cheese</option></optgroup></select>');
+
+        expect(bootstrap_select.find('button span').text()).toBe('Ham and Cheese');
+        expect(bootstrap_select.find('li:first a').text()).toBe('H and C');
+      });
+
+      it("can create a separator", function() {
+        var separator;
+        bootstrap_select = create_select('<select><optgroup label="Sandwich Choice"><option data-separator="true">---</option></optgroup></select>');
+        separator = bootstrap_select.find('li:first span');
+
+        expect(separator).toHaveClass('separator');
+        expect(separator).not.toHaveClass('opt0');
+      });
+    });
+
+    function create_select(markup) {
+      jasmine.getFixtures().set(markup);
+      $('select').selectpicker();
+      return $('.bootstrap-select');
+    }
+  });
+
+});