Merge pull request #864 from Imperial-Dragon/development

Autofill Searchbar

src/renderer/components/ft-input/ft-input.css

@@ -82,3 +82,26 @@
 .forceTextColor .inputAction:active {
   background-color: var(--primary-color-active);
 }
+
+.list {
+  position: absolute;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 5px 0;
+  border-radius: 0 0 5px 5px;
+  border: 1px #ccc solid;
+  background-color: white;
+  color: black;
+}
+
+.list li {
+  display: block;
+  padding: 0px 15px;
+  line-height: 2rem;
+}
+
+.hover {
+  background-color: #ccc;
+/*   color: white; */
+}

src/renderer/components/ft-input/ft-input.js

@@ -43,7 +43,12 @@ export default Vue.extend({
   data: function () {
     return {
       id: '',
-      inputData: ''
+      inputData: '',
+      searchState: {
+        showOptions: false,
+        selectedOption: -1,
+        isPointerInList: false
+      }
     }
   },
   computed: {
@@ -72,10 +77,15 @@ export default Vue.extend({
   },
   methods: {
     handleClick: function () {
+      this.searchState.showOptions = false
+      this.$emit('input', this.inputData)
       this.$emit('click', this.inputData)
     },
 
     handleInput: function () {
+      if (this.isSearch &&
+        this.searchState.selectedOption !== -1 &&
+        this.inputData === this.dataList[this.searchState.selectedOption]) { return }
       this.$emit('input', this.inputData)
     },
 
@@ -89,6 +99,37 @@ export default Vue.extend({
           }
         })
       }
+    },
+
+    handleOptionClick: function (index) {
+      this.searchState.showOptions = false
+      this.inputData = this.dataList[index]
+      this.$emit('input', this.inputData)
+      this.handleClick()
+    },
+
+    handleKeyDown: function (keyCode) {
+      if (this.dataList.length === 0) { return }
+
+      // Update selectedOption based on arrow key pressed
+      if (keyCode === 40) {
+        this.searchState.selectedOption = (this.searchState.selectedOption + 1) % this.dataList.length
+      } else if (keyCode === 38) {
+        if (this.searchState.selectedOption === -1) {
+          this.searchState.selectedOption = this.dataList.length - 1
+        } else {
+          this.searchState.selectedOption--
+        }
+      } else {
+        this.searchState.selectedOption = -1
+      }
+
+      // Update Input box value if arrow keys were pressed
+      if ((keyCode === 40 || keyCode === 38) && this.searchState.selectedOption !== -1) { this.inputData = this.dataList[this.searchState.selectedOption] }
+    },
+
+    handleInputBlur: function () {
+      if (!this.searchState.isPointerInList) { this.searchState.showOptions = false }
     }
   }
 })

src/renderer/components/ft-input/ft-input.vue

@@ -27,6 +27,9 @@
       :placeholder="placeholder"
       :disabled="disabled"
       @input="e => handleInput(e.target.value)"
+      @focus="searchState.showOptions = true"
+      @blur="handleInputBlur"
+      @keydown="e => handleKeyDown(e.keyCode)"
     >
     <font-awesome-icon
       v-if="showArrow"
@@ -34,16 +37,26 @@
       class="inputAction"
       @click="handleClick"
     />
-    <datalist
-      v-if="dataList.length > 0"
+
+    <div class="options">
+      <ul
+        v-if="inputData !== '' && dataList.length > 0 && searchState.showOptions"
         :id="idDataList"
+        :class="'list'"
+        @mouseenter="searchState.isPointerInList = true"
+        @mouseleave="searchState.isPointerInList = false"
       >
-      <option
+        <li
           v-for="(list, index) in dataList"
           :key="index"
-        :value="list"
-      />
-    </datalist>
+          :class="searchState.selectedOption == index ? 'hover': ''"
+          @click="handleOptionClick(index)"
+          @mouseenter="searchState.selectedOption = index"
+        >
+          {{ list }}
+        </li>
+      </ul>
+    </div>
   </div>
 </template>