[Vue.js] Input Suggest Dropdown Menu

This is a simplified Vue.js version of my input suggest library written in GopherJS [1]. Usually used in dictionary application.

Demo

The following are key aspects in the code:

  • Use directive v-model to bind input text element to property named userinput, which record the value of user input. The .trim modifier is also used to trim leading and trailing whitespaces of userinput.
  • watcher is used to monitor the changes of userinput [4]. If userinput changes, we generate 10 random strings to provide suggested words. You should implement your own suggested words here.
  • v-bind:style, v-show, and computed properties are used to provide style and visibility of div.suggest element.

Source code:

index.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <title>[Vue.js] Input Suggest Dropdown Menu</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, minimal-ui" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>[v-cloak] {display: none;}</style>
</head>
<body style="text-align: center;">

<form id="suggestApp">
  <input type="text" autocomplete="off" v-model.trim="userinput" autofocus>
  <div class="suggest" v-bind:style="styleObject" v-show="isShowSuggestMenu" v-cloak>
    <div v-for="suggestedWord in suggestedWords">{{ suggestedWord }}</div>
  </div>
</form>

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="app.js"></script>

</body>
</html>
app.js | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
'use strict';

var app = new Vue({
  el: '#suggestApp',
  data: {
    userinput: '',
    suggestedWords: []
  },
  computed: {
    isShowSuggestMenu: function() {
      return (this.suggestedWords.length > 0);
    },
    styleObject: function() {
      var inputElm = document.querySelector('input[autocomplete=off]');
      return {
        left: inputElm.offsetLeft + 'px',
        minWidth: inputElm.offsetWidth + 'px'
      };
    }
  },
  watch: {
    /**
     * Watch *userinput* change.
     * If change, generate 10 random strings as suggested words.
     * Implement your own suggest function here.
     */
    userinput: function(val, oldVal) {

      // min(inclusive), max(inclusive)
      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function randomString(strlen) {
        const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
        var result = "";
        for (var i=0; i<strlen; i++) {
          result += chars[getRandomInt(0,35)];
        }
        return result;
      }

      // empty *suggestedWords*
      while(this.suggestedWords.length > 0) {
        this.suggestedWords.pop();
      }

      if (val.length > 0) {
        // append 10 random strings to *suggestedWords*
        for (var i=0; i<10; i++) {
          this.suggestedWords.push(randomString(val.length));
        }
      }
    }
  }
})
style.css | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
.suggest {
  border-top-color: #C9D7F1;
  border-right-color: #36C;
  border-bottom-color: #36C;
  border-left-color: #A2BAE7;
  border-style: solid;
  border-width: 1px;
  z-index: 10;
  padding: 0;
  background-color: white;
  overflow: hidden;
  position: absolute;
  text-align: left;
  font-size: large;
  border-radius: 4px;
  margin-top: 1px;
  line-height: 1.25em;
}
For AngularJS version, see [5].

Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
  • Vue.js 2.1.10.

References:

[1]GitHub - siongui/gopherjs-input-suggest: input suggest menu via GopherJS (Demo)
[2]

vuejs autofocus - Google search

vuejs autofocus - DuckDuckGo search

vuejs autofocus - Bing search

vuejs autofocus - Yahoo search

vuejs autofocus - Baidu search

vuejs autofocus - Yandex search
[3]Vuejs - How to Focus Inputs - Tutelage Systems
[4][Vue.js] Input Text Element Change Event
[5][AngularJS] Input Suggest Dropdown Menu
Powered by Github Pages, Pelican, pyScss.