Merge pull request #6 from mycolorway/tf-hint

ADD: hint for items
mycolorway · Mar 21, 2016 · 436eec2 · 436eec2
2 parents 571a18c + 1ffbcc1
commit 436eec2
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -81,14 +81,17 @@ select.selectItem(2);
 ```javascript
 select.setItems([{
   label: "张三",
+  hint: '#1',
   key: "zhangsan zs 张三",
   id: "1"
 },{
   label: "李四",
+  hint: '#2',
   key: "lisi ls 李四",
   id: "2"
 },{
   label: "王麻子",
+  hint: '#3',
   key: "wangmazi wmz 王麻子",
   id: "3"
 }]);
@@ -103,6 +106,7 @@ select.selectItem(2);
 // 返回
 // {
 //   label: "王麻子",
+//   hint: '#2',
 //   key: "wangmazi wmz 王麻子",
 //   id: "3"
 // }
@@ -126,4 +130,3 @@ select.selectItem(2);
 **clear**
 
 触发条件：清除输入内容和选择的元素。
-
diff --git a/demo.html b/demo.html
@@ -77,9 +77,9 @@
         <div class="demo-one">
             <h3>Demo one: without non value option</h3>
             <select id="select-one">
-                <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="0" data-hint="#1" data-key="George Washington">George Washington</option>
+                <option value="1" data-hint="#2" data-key="John Adams">John Adams</option>
+                <option value="2" data-hint="#3" data-key="Thomas Jefferson">Thomas Jefferson</option>
             </select>
         </div>
 

diff --git a/lib/select.js b/lib/select.js
@@ -49,7 +49,7 @@ Select = (function(superClass) {
 
   Select._tpl = {
     input: "<input type=\"text\" class=\"select-result\" autocomplete=\"off\">",
-    item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n</div>"
+    item: "<div class=\"select-item\">\n  <a href=\"javascript:;\" class=\"label\"><span></span></a>\n  <span class=\"hint\"></span>\n</div>"
   };
 
   Select.prototype._init = function() {
@@ -74,8 +74,7 @@ Select = (function(superClass) {
     this.input = $(Select._tpl.input).attr("placeholder", this.el.data('loading') || this._t('loading')).prependTo(this.select);
     this.list = this.select.find(".select-list");
     this.requireSelect = true;
-    items = [];
-    this.el.find("option").each((function(_this) {
+    items = this.el.find("option").map((function(_this) {
       return function(i, option) {
         var $option, label, value;
         $option = $(option);
@@ -85,12 +84,12 @@ Select = (function(superClass) {
           _this.requireSelect = false;
           return;
         }
-        return items.push($.extend({
+        return $.extend({
           label: label,
           _value: value
-        }, $option.data()));
+        }, $option.data());
       };
-    })(this));
+    })(this)).get();
     if (this.requireSelect) {
       this.select.addClass('require-select');
     }
@@ -357,6 +356,7 @@ Select = (function(superClass) {
       item = items[j];
       $itemEl = $(Select._tpl.item).data(item);
       $itemEl.find(".label span").text(item.label);
+      $itemEl.find(".hint").text(item.hint);
       this.list.append($itemEl);
       if ($.isFunction(this.opts.onItemRender)) {
         this.opts.onItemRender.call(this, $itemEl, item);

diff --git a/spec/index.html b/spec/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner</title>
+  <link rel="shortcut icon" type="image/png" href=".grunt/grunt-contrib-jasmine/jasmine_favicon.png">
+
+  <link rel="stylesheet" type="text/css" href="../.grunt/grunt-contrib-jasmine/jasmine.css">
+
+  <link rel="stylesheet" type="text/css" href="../styles/select.css">
+
+
+</head>
+<body>
+
+
+  <script src="../.grunt/grunt-contrib-jasmine/es5-shim.js"></script>
+
+  <script src="../.grunt/grunt-contrib-jasmine/jasmine.js"></script>
+
+  <script src="../.grunt/grunt-contrib-jasmine/jasmine-html.js"></script>
+
+  <script src="../.grunt/grunt-contrib-jasmine/json2.js"></script>
+
+  <script src="../.grunt/grunt-contrib-jasmine/boot.js"></script>
+
+  <script src="../vendor/bower/jquery/dist/jquery.min.js"></script>
+
+  <script src="../vendor/bower/jquery-mousewheel/jquery.mousewheel.min.js"></script>
+
+  <script src="../vendor/bower/simple-module/lib/module.js"></script>
+
+  <script src="../vendor/bower/simple-util/lib/util.js"></script>
+
+  <script src="../lib/select.js"></script>
+
+  <script src="select-spec.js"></script>
+
+  <script src="../.grunt/grunt-contrib-jasmine/reporter.js"></script>
+
+
+</body>
+</html>
diff --git a/src/select.coffee b/src/select.coffee
@@ -25,6 +25,7 @@ class Select extends SimpleModule
     item: """
       <div class="select-item">
         <a href="javascript:;" class="label"><span></span></a>
+        <span class="hint"></span>
       </div>
     """
 
@@ -66,8 +67,7 @@ class Select extends SimpleModule
 
     @requireSelect = true
 
-    items = []
-    @el.find("option").each (i, option) =>
+    items = @el.find("option").map (i, option) =>
       $option = $(option)
       value = $option.attr 'value'
       label = $option.text().trim()
@@ -76,10 +76,11 @@ class Select extends SimpleModule
         @requireSelect = false
         return
 
-      items.push $.extend({
+      $.extend({
         label: label,
         _value: value
       }, $option.data())
+    .get()
 
     if @requireSelect
       @select.addClass('require-select')
@@ -278,6 +279,7 @@ class Select extends SimpleModule
     for item in items
       $itemEl = $(Select._tpl.item).data(item)
       $itemEl.find(".label span").text(item.label)
+      $itemEl.find(".hint").text(item.hint)
 
       @list.append $itemEl
       @opts.onItemRender.call(@, $itemEl, item)  if $.isFunction @opts.onItemRender

diff --git a/styles/select.css b/styles/select.css
@@ -98,3 +98,7 @@
   color: #666666;
   text-decoration: none;
 }
+.simple-select .select-list .select-item .hint {
+  float: right;
+  color: #aaa;
+}
diff --git a/styles/select.scss b/styles/select.scss
@@ -116,7 +116,11 @@
         color: #666666;
         text-decoration: none;
       }
+
+      .hint {
+        float: right;
+        color: #aaa;
+      }
     }
   }
 }
-