[AngularJS] Input Suggest Dropdown Menu

January 27, 2017

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

<!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

'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

.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: