Add search field.

Author: victor-valencia

README.md

@@ -1,4 +1,4 @@
-# [Bootstrap-Iconpicker v1.4.0](http://victor-valencia.github.io/bootstrap-iconpicker)
+# [Bootstrap-Iconpicker v1.5.0](http://victor-valencia.github.io/bootstrap-iconpicker)
 ![Iconpicker](bootstrap-iconpicker.png)
 
 A simple iconpicker for Bootstrap 3.
@@ -18,7 +18,7 @@ Please note that this project is for <a href="http://getbootstrap.com/"><strong>
 
 Three quick start options are available:
 
-- [Download the latest release](https://github.com/victor-valencia/bootstrap-iconpicker/archive/v1.4.0.zip).
+- [Download the latest release](https://github.com/victor-valencia/bootstrap-iconpicker/archive/v1.5.0.zip).
 - Clone the repo: `git clone https://github.com/victor-valencia/bootstrap-iconpicker.git`.
 - Install with [Bower](http://bower.io): `bower install bootstrap-iconpicker`.
 
@@ -56,6 +56,7 @@ See documentation and live examples here: <a href="http://victor-valencia.github
 - v1.3.0 - Support multiple versions of FontAwesome. @[victor-valencia](https://github.com/victor-valencia)
 - v1.3.1 - Bind body 'click' to solve issues for ajax loaded pages. @[crlcu](https://github.com/crlcu)
 - v1.4.0 - Support for customization of the component. @[victor-valencia](https://github.com/victor-valencia)
+- v1.5.0 - Add search field. @[victor-valencia](https://github.com/victor-valencia)
 
 ## Versioning
 For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.

bootstrap-iconpicker.png

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap-iconpicker v1.4.0
+ * Bootstrap-iconpicker v1.5.0
  *
  * Copyright 2013-2014 Victor Valencia Rico.
  * Licensed under the Apache License v2.0
@@ -24,10 +24,19 @@
     margin: 2px;
 }
 
+.table-icons td{    
+    min-width: 39px;
+}
+
 .popover {
     max-width: inherit !important;
 }
 
 .iconpicker-popover {
   z-index: 1050 !important;
+}
+
+.iconpicker-popover .search-control {
+    margin-bottom: 6px; 
+    margin-top: 6px;
 }

bootstrap-iconpicker/css/bootstrap-iconpicker.css

@@ -1,9 +1,10 @@
 /*!
- * Bootstrap-iconpicker v1.4.0
+ * Bootstrap-iconpicker v1.5.0
  *
  * Copyright 2013-2014 Victor Valencia Rico.
  * Licensed under the Apache License v2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world by @recktoner.
- */.iconpicker .caret{margin-left:10px!important}.iconpicker{min-width:60px}.table-icons .btn{min-height:30px;min-width:35px;text-align:center;padding:0;margin:2px}.popover{max-width:inherit!important}.iconpicker-popover{z-index:1050!important}
+ */
+.iconpicker .caret{margin-left:10px!important}.iconpicker{min-width:60px}.table-icons .btn{min-height:30px;min-width:35px;text-align:center;padding:0;margin:2px}.table-icons td{min-width:39px}.popover{max-width:inherit!important}.iconpicker-popover{z-index:1050!important}.iconpicker-popover .search-control{margin-bottom:6px;margin-top:6px}

bootstrap-iconpicker/css/bootstrap-iconpicker.min.css

@@ -1,5 +1,5 @@
 /* ========================================================================
- * Bootstrap: bootstrap-iconpicker.js v1.4.0 by @recktoner
+ * Bootstrap: bootstrap-iconpicker.js v1.5.0 by @recktoner
  * https://victor-valencia.github.com/bootstrap-iconpicker
  * ========================================================================
  * Copyright 2013-2014 Victor Valencia Rico.
@@ -243,7 +243,9 @@
         placement: 'bottom',
         arrowClass: 'btn-primary',
         selectedClass: 'btn-warning',        
-        unselectedClass: 'btn-default'
+        unselectedClass: 'btn-default',
+        search: true,
+        searchText: 'Search icon'
     };
 
     Iconpicker.prototype.createButtonBar = function(){
@@ -265,16 +267,26 @@
             }
         }
         op.table.find('thead').append(tr);
+        if(op.search == true){
+            var search = [
+                '<tr>',
+                '   <td colspan="' + op.cols + '">',
+                '       <input type="text" class="form-control search-control" style="width: ' + op.cols * 39 + 'px;" placeholder="' + op.searchText + '">',
+                '   </td>',
+                '</tr>'
+            ];            
+            op.table.find('thead').append(search.join(''));
+        }
     };
 
     Iconpicker.prototype.updateButtonBar = function(page){
         var op = this.options;
         var total_pages = Math.ceil( op.icons.length / (op.cols * op.rows) );
-        op.table.find('.page-count').html(page + ' / ' + total_pages);
+        op.table.find('.page-count').html(((total_pages == 0 ) ? 0: page) + ' / ' + total_pages);
         var btn_prev = op.table.find('.btn-previous');
         var btn_next = op.table.find('.btn-next');
         (page == 1) ? btn_prev.addClass('disabled'): btn_prev.removeClass('disabled');
-        (page == total_pages) ? btn_next.addClass('disabled'): btn_next.removeClass('disabled');
+        (page == total_pages || total_pages == 0) ? btn_next.addClass('disabled'): btn_next.removeClass('disabled');
     };
 
     Iconpicker.prototype.bindEvents = function(){
@@ -288,6 +300,9 @@
             el.select($(this).val());
             el.$element.popover('destroy');
         });
+        op.table.find('.search-control').off('keyup').on('keyup', function(e){
+            el.changeList(1);
+        });
     };
 
     Iconpicker.prototype.select = function(icon){
@@ -319,6 +334,22 @@
 
     Iconpicker.prototype.changeList = function(page){
         var op = this.options;
+        var search = "";
+        if(op.search == true){
+            search = op.table.find('.search-control').val();
+            if(search == ""){
+                op.icons = Iconpicker.ICONSET[op.ic];
+            }
+            else{
+                var result = [];
+                $.each(Iconpicker.ICONSET[op.ic], function(i, v){
+                   if(v.indexOf(search) > -1){
+                       result.push(v);
+                   } 
+                });
+                op.icons = result;
+            }   
+        }
         this.updateButtonBar(page);
         var tbody = op.table.find('tbody').empty();
         var offset = (page - 1) * op.rows * op.cols;
@@ -358,6 +389,7 @@
                 var op = data.options;
                 var ic = (op.iconset == 'fontawesome') ? 'fa' : 'glyphicon';
                 op = $.extend(op, {
+                    ic: ic,
                     icons: Iconpicker.ICONSET[ic],
                     iconClass: ic,
                     iconClassFix: ic + '-',
@@ -371,7 +403,7 @@
                     .append('<input type="hidden" ' + name + '></input>')
                     .append('<span class="caret"></span>');
                 $this.addClass('iconpicker');
-                data.createButtonBar();
+                data.createButtonBar();                
                 data.changeList(1);
                 $this.on('click', function(e){
                     e.preventDefault();