Library to implement next word prediction in front-end

[methuselah90]

Does anyone know of an AngularJS (v10 directive that implements next word prediction in a <textarea> HTML element based on the text already entered? Or could perhaps suggest an approach that could help implement this in the front-end? I've included some examples below:

1. WordPrediction

2. Google Scribe

I am currently implementing an n-gram for next word prediction as detailed below in the back-end, but having difficulty figuring out how the implementation might work in the front-end.

[Sander Elias]

Hi Methusela,

Done some research. Most approaches are dependent on a larger dataset of words. This alone makes it less suited for an implementation in the browser.

What you can do is use WebSocket to communicate with your backend, and do the prediction there.  If you don't want to host such a thing yourself, there is, for example, the google prediction API. (MS and AWS and other will have similar offerings) Those usually use a rest interface, that makes it a bit more of a chore to interface with it.

Hope this helps you a bit,

Regards

Sander

[methuselah90]

Hi Sander,

Thanks for your response. To date I've created a rough demo here which I want to extend in order to make it look like the image below, in other words:

• Div popup appears inline with text in textbox
  
• Multiple suggestions appear in popup
  
• Click on suggestion to add to textbox
  

How can I accomplish this. Here is my code so far: http://jsfiddle.net/v7oaarx1/2/

HTML

<div class="wrapper">
  <input type="text" id="one" class="suggest" />
</div>

JavaScript

var inputs = document.querySelectorAll('.suggest');
for (var i = 0; field = inputs[i]; i++) {
  field.addEventListener('keyup', function(event) {
    var words = ['the', 'of', 'to', 'and', 'a', 'in', 'is', 'it', 'you', 'that', 'he', 'was', 'for', 'on', 'are', 'with', 'as', 'I', 'his', 'they', 'be', 'at', 'one', 'have', 'this', 'from', 'or', 'had', 'by', 'hot', 'word', 'but', 'what', 'some', 'we', 'can', 'out', 'other', 'were', 'all', 'there', 'when', 'up', 'use', 'your', 'how', 'said', 'an', 'each', 'she', 'which', 'do', 'their', 'time', 'if', 'will', 'way', 'about', 'many', 'then', 'them', 'write', 'would', 'like', 'so', 'these', 'her', 'long', 'make', 'thing', 'see', 'him', 'two', 'has', 'look', 'more', 'day', 'could', 'go', 'come', 'did', 'number', 'sound', 'no', 'most', 'people', 'my', 'over', 'know', 'water', 'than', 'call', 'first', 'who', 'may', 'down', 'side', 'been', 'now', 'find', 'any', 'new', 'work', 'part', 'take', 'get', 'place', 'made', 'live', 'where', 'after', 'back', 'little', 'only', 'round', 'man', 'year', 'came', 'show', 'every', 'good', 'me', 'give', 'our', 'under', 'name', 'very', 'through', 'just', 'form', 'sentence', 'great', 'think', 'say', 'help', 'low', 'line', 'differ', 'turn', 'cause', 'much', 'mean', 'before', 'move', 'right', 'boy', 'old', 'too', 'same', 'tell', 'does', 'set', 'three', 'want', 'air', 'well', 'also', 'play', 'small', 'end', 'put', 'home', 'read', 'hand', 'port', 'large', 'spell', 'add', 'even', 'land', 'here', 'must', 'big', 'high', 'such', 'follow', 'act', 'why', 'ask', 'men', 'change', 'went', 'light', 'kind', 'off', 'need', 'house', 'picture', 'try', 'us', 'again', 'animal', 'point', 'mother', 'world', 'near', 'build', 'self', 'earth', 'father', 'head', 'stand', 'own', 'page', 'should', 'country', 'found', 'answer', 'school', 'grow', 'study', 'still', 'learn', 'plant', 'cover', 'food', 'sun', 'four', 'between', 'state', 'keep', 'eye', 'never', 'last', 'let', 'thought', 'city', 'tree', 'cross', 'farm', 'hard', 'start', 'might', 'story', 'saw', 'far', 'sea', 'draw', 'left', 'late', 'run','while ','press ','close', 'chair', 'danger', 'fruit', 'rich', 'thick', 'soldier', 'process', 'operate', 'guess', 'necessary', 'sharp', 'wing', 'create', 'neighbor', 'wash', 'bat', 'rather', 'crowd', 'corn', 'compare', 'poem', 'string', 'bell', 'depend', 'meat', 'rub', 'tube', 'famous', 'dollar', 'stream', 'fear', 'sight', 'thin', 'triangle', 'planet', 'hurry', 'chief', 'colony', 'clock', 'mine', 'tie', 'enter', 'major', 'fresh', 'search', 'send', 'yellow', 'gun', 'allow', 'print', 'dead', 'spot', 'desert', 'suit', 'current', 'lift', 'rose', 'continue', 'block', 'chart', 'hat', 'sell', 'success', 'company', 'subtract', 'event', 'particular', 'deal', 'swim', 'term', 'opposite', 'wife', 'shoe', 'shoulder', 'spread', 'arrange', 'camp', 'invent', 'cotton', 'born', 'determine', 'quart', 'nine', 'truck', 'noise', 'level', 'chance', 'gather', 'shop', 'stretch', 'throw', 'shine', 'property', 'column', 'molecule', 'select', 'wrong', 'gray', 'repeat', 'require', 'broad', 'prepare', 'salt', 'nose', 'plural', 'anger', 'claim', 'continent', 'oxygen', 'sugar', 'death', 'pretty', 'skill', 'women', 'season', 'solution', 'magnet', 'silver', 'thank', 'branch', 'match', 'suffix', 'especially', 'fig', 'afraid', 'huge', 'sister', 'steel', 'discuss', 'forward', 'similar', 'guide', 'experience', 'score', 'apple', 'bought', 'led', 'pitch', 'coat', 'mass', 'card', 'band', 'rope', 'slip', 'win', 'dream', 'evening', 'condition', 'feed', 'tool', 'total', 'basic', 'smell', 'valley', 'nor', 'double', 'seat', 'arrive', 'master', 'track', 'parent', 'shore', 'division', 'sheet', 'substance', 'favor', 'connect', 'post', 'spend', 'chord', 'fat', 'glad', 'original', 'share', 'station', 'dad', 'bread', 'charge', 'proper', 'bar', 'offer', 'segment', 'slave', 'duck', 'instant', 'market', 'degree', 'populate', 'chick', 'dear', 'enemy', 'reply', 'drink', 'occur', 'support', 'speech', 'nature', 'range', 'steam', 'motion', 'path', 'liquid', 'log', 'meant', 'quotient', 'teeth', 'shell', 'neck']

    var text = 'Suggested next word: ' + words[Math.floor(Math.random() * words.length)];

    if (!this.suggestion) {
      var rect = this.getBoundingClientRect();
      var left = rect.left;
      var top = rect.bottom;
      this.suggestion = document.createElement('DIV');
      this.suggestion.innerHTML = text;
      this.suggestion.setAttribute('style', 'background: #B0B0B0; padding: 10px; position: absolute; top: ' + top + 'px; left: ' + left + 'px;');
      this.parentNode.appendChild(this.suggestion);
    } else {
      this.suggestion.innerHTML = text;
      this.suggestion.style.display = 'block';
    }

  });
  field.addEventListener('blur', function(event) {
    if (this.suggestion) {
      this.suggestion.style.display = 'none';
    }
  });
}

Can you help with this?