Show tags as completion list

browser/main/Detail/MarkdownNoteDetail.js

@@ -363,6 +363,7 @@ class MarkdownNoteDetail extends React.Component {
           ref='tags'
           value={this.state.note.tags}
           onChange={this.handleUpdateTag.bind(this)}
+          data={data}
         />
         <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>

browser/main/Detail/TagSelect.js

@@ -108,7 +108,7 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    const { value, className } = this.props
+    const { value, data, className } = this.props
 
     const tagList = _.isArray(value)
       ? value.map((tag) => {
@@ -127,6 +127,14 @@ class TagSelect extends React.Component {
       })
       : []
 
+    const completionList = _.sortBy(data.tagNoteMap.map(
+      (tag, name) => ({ name, size: tag.size })
+    ), ['name']).filter(
+      tag => tag.size > 0
+    ).map(
+      tag => <option key={tag.name} value={tag.name} />
+    )
+
     return (
       <div className={_.isString(className)
           ? 'TagSelect ' + className
@@ -142,7 +150,12 @@ class TagSelect extends React.Component {
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
           onBlur={(e) => this.handleNewTagBlur(e)}
+          list='completionList'
+          autoComplete='off'
         />
+        <datalist id='completionList'>
+          {completionList}
+        </datalist>
       </div>
     )
   }

browser/main/Detail/TagSelect.styl

@@ -49,6 +49,11 @@
   outline none
   padding 0 4px
   font-size 13px
+  &::-webkit-calendar-picker-indicator
+    color $ui-inactive-text-color
+    cursor pointer
+    &:hover
+      background none
 
 body[data-theme="dark"]
   .tag