diff options
| -rw-r--r-- | css/application.css | 1 | ||||
| -rw-r--r-- | css/multi-select.css | 10 | ||||
| -rw-r--r-- | demos.html | 20 | ||||
| -rw-r--r-- | img/minus.png | bin | 0 -> 259 bytes | |||
| -rw-r--r-- | img/plus.png | bin | 0 -> 255 bytes | |||
| -rw-r--r-- | js/application.js | 19 | ||||
| -rw-r--r-- | js/jquery.quicksearch.js | 150 |
7 files changed, 198 insertions, 2 deletions
diff --git a/css/application.css b/css/application.css index a82eabc..5d90b24 100644 --- a/css/application.css +++ b/css/application.css @@ -251,6 +251,7 @@ ul#demos-menu li:hover{ #demos-content{ float: right; width: 788px; + min-height: 400px; padding: 20px; border: 1px #ddd solid; background: #eee; diff --git a/css/multi-select.css b/css/multi-select.css index 2d993b9..5692141 100644 --- a/css/multi-select.css +++ b/css/multi-select.css @@ -52,10 +52,16 @@ } .ms-container .ms-optgroup-label{ - padding: 5px 0px 0px 5px; + padding: 5px 0px 0px 20px; + background: transparent url('../img/plus.png') no-repeat 5px 10px; + cursor: pointer; color: #999; } +.ms-container .ms-optgroup-label.collapse{ + background-image: url('../img/minus.png'); +} + .ms-container li.ms-elem-selectable:hover, .ms-container .ms-selection li:hover{ cursor: pointer; @@ -65,4 +71,4 @@ .ms-container .ms-selection li:hover{ background: #eee url('../img/delete.png') no-repeat 3px 3px; -} +}
\ No newline at end of file @@ -43,6 +43,7 @@ <li id='submit-form'>Submit form</li> <li id='empty-form'>Empty array</li> <li id='disabled'>Disabled options</li> + <li id='searchable'>Searchable</li> </ul> <div id='demos-content'> <div class='simple'> @@ -212,6 +213,24 @@ <input type='submit' value='submit' /> </form> </div> + <div class='searchable' style='display:none'> + <form id='searchable-form' action='http://localhost:4567/ms' method='post'> + <select name='countries[]' multiple='multiple' id='searchable-select'> + <option value='fr'>France</option> + <option value='ca'>Canada</option> + <option value='ar'>Argentina</option> + <option value='pt'>Portugal</option> + <option value='us'>United States</option> + <option value='gb'>United Kingdom</option> + <option value='au'>Australia</option> + <option value='ao'>Angola</option> + <option value='aq'>Antarctica</option> + <option value='bq'>Burkina Faso</option> + <option value='cn'>China</option> + </select> + <input type='submit' value='submit' /> + </form> + </div> <div class='disabled' style='display:none'> <form> <select multiple='multiple' id='disabled-options' class='multiselect'> @@ -248,6 +267,7 @@ </div> </page> <script src="js/jquery.js" type="text/javascript"></script> + <script src="js/jquery.quicksearch.js" type="text/javascript"></script> <script src="js/jquery.multi-select.js" type="text/javascript"></script> <script src="js/application.js" type="text/javascript"></script> </body> diff --git a/img/minus.png b/img/minus.png Binary files differnew file mode 100644 index 0000000..309c668 --- /dev/null +++ b/img/minus.png diff --git a/img/plus.png b/img/plus.png Binary files differnew file mode 100644 index 0000000..42cf7d4 --- /dev/null +++ b/img/plus.png diff --git a/js/application.js b/js/application.js index d192921..b6bb163 100644 --- a/js/application.js +++ b/js/application.js @@ -1,6 +1,23 @@ (function($){ $(function(){ + $('.multiselect').multiSelect({}); + $('#ms-optgroup .ms-selectable').find('li.ms-elem-selectable').hide(); + $('.ms-optgroup-label').click(function(){ + if ($(this).hasClass('collapse')){ + $(this).nextAll('li').hide(); + $(this).removeClass('collapse'); + } else { + $(this).nextAll('li').show(); + $(this).addClass('collapse'); + } + }); + + $('#searchable-form').multiSelect({ + selectableHeader : '<input type="text" id="search" />' + }); + $('input#search').quicksearch('#ms-searchable-form li'); + $('#multipleHeaders').multiSelect({ selectableHeader : '<h4>Selectable Items</h4>', selectedHeader : '<h4>Selected Items</h4>' @@ -24,6 +41,8 @@ return false; }); + $() + $('#deselectAll').click(function(){ $('#outsideCountries').multiSelect('deselect_all'); return false; diff --git a/js/jquery.quicksearch.js b/js/jquery.quicksearch.js new file mode 100644 index 0000000..edb6a22 --- /dev/null +++ b/js/jquery.quicksearch.js @@ -0,0 +1,150 @@ +(function($, window, document, undefined) { + $.fn.quicksearch = function (target, opt) { + + var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({ + delay: 100, + selector: null, + stripeRows: null, + loader: null, + noResults: '', + bind: 'keyup', + onBefore: function () { + return; + }, + onAfter: function () { + return; + }, + show: function () { + this.style.display = ""; + }, + hide: function () { + this.style.display = "none"; + }, + prepareQuery: function (val) { + return val.toLowerCase().split(' '); + }, + testQuery: function (query, txt, _row) { + for (var i = 0; i < query.length; i += 1) { + if (txt.indexOf(query[i]) === -1) { + return false; + } + } + return true; + } + }, opt); + + this.go = function () { + + var i = 0, + noresults = true, + query = options.prepareQuery(val), + val_empty = (val.replace(' ', '').length === 0); + + for (var i = 0, len = rowcache.length; i < len; i++) { + if (val_empty || options.testQuery(query, cache[i], rowcache[i])) { + options.show.apply(rowcache[i]); + noresults = false; + } else { + options.hide.apply(rowcache[i]); + } + } + + if (noresults) { + this.results(false); + } else { + this.results(true); + this.stripe(); + } + + this.loader(false); + options.onAfter(); + + return this; + }; + + this.stripe = function () { + + if (typeof options.stripeRows === "object" && options.stripeRows !== null) + { + var joined = options.stripeRows.join(' '); + var stripeRows_length = options.stripeRows.length; + + jq_results.not(':hidden').each(function (i) { + $(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]); + }); + } + + return this; + }; + + this.strip_html = function (input) { + var output = input.replace(new RegExp('<[^<]+\>', 'g'), ""); + output = $.trim(output.toLowerCase()); + return output; + }; + + this.results = function (bool) { + if (typeof options.noResults === "string" && options.noResults !== "") { + if (bool) { + $(options.noResults).hide(); + } else { + $(options.noResults).show(); + } + } + return this; + }; + + this.loader = function (bool) { + if (typeof options.loader === "string" && options.loader !== "") { + (bool) ? $(options.loader).show() : $(options.loader).hide(); + } + return this; + }; + + this.cache = function () { + + jq_results = $(target); + + if (typeof options.noResults === "string" && options.noResults !== "") { + jq_results = jq_results.not(options.noResults); + } + + var t = (typeof options.selector === "string") ? jq_results.find(options.selector) : $(target).not(options.noResults); + cache = t.map(function () { + return e.strip_html(this.innerHTML); + }); + + rowcache = jq_results.map(function () { + return this; + }); + + return this.go(); + }; + + this.trigger = function () { + this.loader(true); + options.onBefore(); + + window.clearTimeout(timeout); + timeout = window.setTimeout(function () { + e.go(); + }, options.delay); + + return this; + }; + + this.cache(); + this.results(true); + this.stripe(); + this.loader(false); + + return this.each(function () { + $(this).bind(options.bind, function () { + val = $(this).val(); + e.trigger(); + }); + }); + + }; + +}(jQuery, this, document));
\ No newline at end of file |
