Merge pull request #11 from mycolorway/scl-add-multiinput-option

Scl add multiinput option
mycolorway · May 16, 2016 · 5445b01 · 5445b01
2 parents a6a5741 + f5998fe
commit 5445b01
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,8 @@ simple.select({
     el: $('select'),           // * 必须
     cls: "",                   // 额外的 class
     onItemRender: $.noop,      // 渲染列表每个元素后调用的函数
-    placeholder: ""            // input 元素的 placeholder 属性
+    placeholder: "",           // input 元素的 placeholder 属性
+    multiline: false          // input 元素是否可换行，默认为true
 });
 ```
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-select",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "homepage": "https://github.com/mycolorway/simple-select",
   "authors": [
     "kshift <[email protected]>"

diff --git a/demo.html b/demo.html
@@ -34,7 +34,8 @@
         $(function() {
             simple.select({
                 el: $('#select-one'),
-                placeholder: 'type sth...'
+                placeholder: 'type sth...',
+                multiline: false
             });
 
             simple.select({
@@ -75,7 +76,7 @@
 <body>
     <div class="wrapper">
         <div class="demo-one">
-            <h3>Demo one: without non value option</h3>
+            <h3>Demo one: multiline as false</h3>
             <select id="select-one">
                 <option value="0" data-hint="#1" data-key="George Washington">George Washington</option>
                 <option value="1" data-hint="#2" data-key="John Adams">John Adams</option>
@@ -84,7 +85,7 @@ <h3>Demo one: without non value option</h3>
         </div>
 
         <div class="demo-two">
-            <h3>Demo two</h3>
+            <h3>Demo two: without non value option</h3>
 
             <select id="select-two">
             </select>
@@ -96,7 +97,7 @@ <h3>Demo three: with non value option</h3>
                 <option value="">select something</option>
                 <option value="0" data-key="George Washington">George Washington</option>
                 <option value="1" data-key="John Adams">John Adams</option>
-                <option value="2" data-key="Thomas Jefferson">Thomas Jefferson</option>
+                <option value="2" data-key="Thomas Jefferson">Thomas Jefferson Thomas Jefferson Thomas Jefferson</option>
             </select>
         </div>
     </div>

diff --git a/lib/select.js b/lib/select.js
@@ -31,7 +31,8 @@ Select = (function(superClass) {
     cls: "",
     onItemRender: $.noop,
     placeholder: "",
-    allowInput: false
+    allowInput: false,
+    multiline: true
   };
 
   Select.i18n = {
@@ -48,7 +49,8 @@ Select = (function(superClass) {
   };
 
   Select._tpl = {
-    input: "<textarea rows=1 type=\"text\" class=\"select-result\" autocomplete=\"off\"></textarea>",
+    textarea: "<textarea rows=1 type=\"text\" class=\"select-result\" autocomplete=\"off\"></textarea>",
+    input: "<input type=\"text\" class=\"select-result\" autocomplete=\"off\">",
     item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n  <span class=\"hint\"></span>\n</div>"
   };
 
@@ -67,12 +69,18 @@ Select = (function(superClass) {
   };
 
   Select.prototype._render = function() {
-    var items;
+    var inputTpl, items;
     Select._tpl.select = "<div class=\"simple-select\">\n  <span class=\"link-expand\" title=\"" + (this._t('all_options')) + "\">\n    <i class=\"icon-caret-down\"><span>&#9662;</span></i>\n  </span>\n  <span class=\"link-clear\" title=\"" + (this._t('clear_selection')) + "\">\n    <i class=\"icon-delete\"><span>&#10005;</span></i>\n  </span>\n  <div class=\"select-list\">\n    <div class=\"loading\">" + (this._t('loading')) + "</div>\n  </div>\n</div>";
     this.el = $(this.opts.el).hide();
     this.el.data("select", this);
     this.select = $(Select._tpl.select).data("select", this).addClass(this.opts.cls).insertBefore(this.el);
-    this.input = $(Select._tpl.input).attr("placeholder", this.opts.placeholder || this.el.data('placeholder') || "").prependTo(this.select);
+    if (this.opts.multiline) {
+      this.select.addClass('multiline');
+      inputTpl = Select._tpl.textarea;
+    } else {
+      inputTpl = Select._tpl.input;
+    }
+    this.input = $(inputTpl).attr("placeholder", this.opts.placeholder || this.el.data('placeholder') || "").prependTo(this.select);
     this.list = this.select.find(".select-list");
     this.requireSelect = true;
     items = this.el.find("option").map((function(_this) {
@@ -417,6 +425,9 @@ Select = (function(superClass) {
   };
 
   Select.prototype.autoresizeInput = function() {
+    if (!this.opts.multiline) {
+      return;
+    }
     return setTimeout((function(_this) {
       return function() {
         _this.input.css("height", 0);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-select",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "a simple select plugin based on Simple Module",
   "main": "lib/select.js",
   "repository": {

diff --git a/src/select.coffee b/src/select.coffee
@@ -6,6 +6,7 @@ class Select extends SimpleModule
     onItemRender: $.noop
     placeholder: ""
     allowInput: false
+    multiline: true
 
   @i18n:
     "zh-CN":
@@ -18,10 +19,14 @@ class Select extends SimpleModule
       loading: "Loading..."
 
   @_tpl:
-    input: """
+    textarea: """
       <textarea rows=1 type="text" class="select-result" autocomplete="off"></textarea>
     """
 
+    input: """
+      <input type="text" class="select-result" autocomplete="off">
+    """
+
     item: """
       <div class="select-item">
         <a href="javascript:;" class="label"><span></span></a>
@@ -61,7 +66,13 @@ class Select extends SimpleModule
       .data("select", @)
       .addClass(@opts.cls)
       .insertBefore @el
-    @input = $(Select._tpl.input)
+    if @opts.multiline
+      @select.addClass('multiline')
+      inputTpl = Select._tpl.textarea
+    else
+      inputTpl = Select._tpl.input
+
+    @input = $(inputTpl)
       .attr("placeholder", @opts.placeholder || @el.data('placeholder') || "")
       .prependTo @select
     @list = @select.find ".select-list"
@@ -333,6 +344,7 @@ class Select extends SimpleModule
 
 
   autoresizeInput: () ->
+    return unless @opts.multiline
     setTimeout () =>
       @input.css("height", 0)
       @input.css("height", parseInt(@input.get(0).scrollHeight) + parseInt(@input.css("border-top-width")) + parseInt(@input.css("border-bottom-width")))

diff --git a/styles/select.css b/styles/select.css
@@ -5,8 +5,6 @@
 .simple-select .select-result {
   width: 100%;
   height: 24px;
-  resize: none;
-  overflow: hidden;
   box-sizing: border-box;
   padding: 4px;
   padding-right: 24px;
@@ -80,6 +78,9 @@
   color: #666666;
   border-bottom: 1px solid #dfdfdf;
   cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .simple-select .select-list .select-item:first-child {
   -webkit-border-radius: 4px 4px 0 0;
@@ -103,3 +104,10 @@
   float: right;
   color: #aaa;
 }
+.simple-select.multiline .select-result {
+  resize: none;
+  overflow: hidden;
+}
+.simple-select.multiline .select-list .select-item {
+  white-space: normal;
+}
diff --git a/styles/select.scss b/styles/select.scss
@@ -5,8 +5,6 @@
   .select-result {
     width: 100%;
     height: 24px;
-    resize: none;
-    overflow: hidden;
     box-sizing: border-box;
     padding: 4px;
     padding-right: 24px;
@@ -50,6 +48,7 @@
     .link-clear {
       display: block;
     }
+
   }
 
   &.require-select {
@@ -95,6 +94,9 @@
       color: #666666;
       border-bottom: 1px solid #dfdfdf;
       cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
 
       &:first-child {
         -webkit-border-radius: 4px 4px 0 0;
@@ -124,4 +126,16 @@
       }
     }
   }
+
+  &.multiline {
+    .select-result {
+      resize: none;
+      overflow: hidden;
+    }
+    .select-list {
+      .select-item {
+        white-space: normal;
+      }
+    }
+  }
 }