[AngularJS] Input Suggest Dropdown Menu

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

Demo

The following are key aspects in the code:

  • Use directive ngModel to bind input text element to property named word, which record the value of user input.
  • Use directive ngChange to monitor the changes of user input. If user input changes, inputChange() function calls suggestService to provide suggested words.
  • suggestService generates random strings to provide suggested words. You should implement your own here.

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 ng-app="inputSuggestApp">
<head>
  <title>[AngularJS] 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>.ng-cloak {display: none !important;}</style>
</head>
<body style="text-align: center;">

<form ng-controller="suggestController">
  <input type="text" autocomplete="off" autofocus ng-model="word" ng-change="inputChange()">
  <div class="suggest ng-cloak" ng-show="isShowSuggestMenu()" ng-style="suggestMenuStyle" ng-cloak>
    <div ng-repeat="suggestedWord in suggestedWords track by $index">{{ suggestedWord }}</div>
  </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.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';

angular.module('inputSuggestApp', [])
  .controller('suggestController', ['$scope', 'suggestService', function($scope, ss) {
    $scope.word = "";
    $scope.suggestedWords = [];
    $scope.inputChange = function() {
      // empty $scope.suggestedWords
      while ($scope.suggestedWords.length > 0) {
        $scope.suggestedWords.pop();
      }
      $scope.suggestedWords = ss.GetSuggestedWords($scope.word);
    };
    $scope.isShowSuggestMenu = function() {
      return $scope.suggestedWords.length > 0;
    };

    var inputElm = angular.element(document.querySelector('input'));
    $scope.suggestMenuStyle = {
      left: inputElm.prop('offsetLeft') + 'px',
      minWidth: inputElm.prop('offsetWidth') + 'px',
    };
  }])
  .factory('suggestService', [function() {
    // implement your suggest function here.
    // return random strings for demo purpose.

    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;
    }

    function GetSuggestedWords(word) {
      // Remove leading and trailing whitespaces
      var wordTrimed = word.replace(/(^\s+)|(\s+$)/g, "");

      var suggestedWords = [];
      if (wordTrimed.length > 0) {
        for(var i=0; i<10; i++) {
          suggestedWords.push(RandomString(wordTrimed.length));
        }
      }

      return suggestedWords;
    }

    return { GetSuggestedWords: GetSuggestedWords };
  }]);
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 Vue.js version, see [7].

Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
  • AngularJS 1.6.1.

References:

[1]pali/input.html at master · siongui/pali · GitHub
[2]pali/inputSuggest.js at master · siongui/pali · GitHub
[3]GitHub - siongui/gopherjs-input-suggest: input suggest menu via GopherJS (Demo)
[4]angularjs - How to get element by classname or id - Stack Overflow
[5]AngularJS: Error Reference: dupes
[6]javascript - Angularjs get element position - Stack Overflow
[7][Vue.js] Input Suggest Dropdown Menu
Powered by Github Pages, Pelican, pyScss.