Problem

In 2020 and beyond, autocomplete input fields are a common pattern for data-intensive form completion, but there is no native solution in the AutoForm boilerplate. Many of today's applications require "rich" input experience that can quickly provide suggestions filtered from already existing entries in the database, or an enumerable list of options. Using a "select" for everything is very cumbersome, especially as the list of possible solutions to the text matching enumerable entries exceeds the available area of the UI viewport, such as on Mobile devices. The existing autocomplete and typeahead "add-ons" are outdated and don't conform to the v7 API design, pull in external dependencies, and don't support Bootstrap 4 and beyond.

Solution

Generally, rather than rely exclusively on select dropdown elements, a proper experience leverages a "text" input field that offers a list of autocomplete solutions matching the input text (the needle) with a datum (the haystack) using one or more user-defined patterns (e.g. start, global, case sensitive, case insensitive, all via RegEx).

Specifically, we need to create the /inputTypes/autocomplete/ directory that contains autocomplete.js and autocomplete.html. The basic code for these is included below.

// autocomplete.js
AutoForm.addInputType('autocomplete', {
  template: 'afAutocomplete',
  valueOut: function () {
    return this.val()
  },
  valueConverters: {
    stringArray: AutoForm.valueConverters.stringToStringArray,
    number: AutoForm.valueConverters.stringToNumber,
    numberArray: AutoForm.valueConverters.stringToNumberArray,
    boolean: AutoForm.valueConverters.stringToBoolean,
    booleanArray: AutoForm.valueConverters.stringToBooleanArray,
    date: AutoForm.valueConverters.stringToDate,
    dateArray: AutoForm.valueConverters.stringToDateArray
  },
  contextAdjust: function (context) {
    context.atts.autocomplete = 'off'
    return context
  }
})

// autocomplete.html
<template name="afAutocomplete">
  <input type="text" value="{{this.value}}" {{this.atts}} />
</template>

Moreover, the autocomplete.js should include helpers and UI code that populates Mtext inside the input field plus a floating list of elements below or above the text input field, which the user can highlight using arrow keys and select using Return, touch, or mouse click.

Options for the autocomplete can be set two ways:

1. Via static autoform.options inside a simpl-schema definition. Much like the options used in a select type.
2. Via ReactiveVar or function helper set on data-autocomplete-options in the user's afQuickfield definition. This offers the power to tie a capped collection, or optimized query from MongoDB into the UX, allowing for a dynamic autocomplete experience.

CSS for the autocomplete field should come from Bootstrap 4 (or later) and implement a structured set of class selector definitions for the elements that make up the autocomplete box, which could be structured as follows:

Lastly, we need to allow for theme implementations by adding a Bootstrap 4 theme in meteor-autoform-themes in /bootstrap4/templates/bootstrap4/inputTypes/ so that the form-control class and styles get applied.

<template name="afAutocomplete_bootstrap4">
  <input type="hidden" value="{{this.label}}" {{ this.visibleAtts }} />
  <input type="text" value="{{this.value}}" {{ this.visibleAtts }} />
  <div class="autocomplete dropdown">
    <div class="ac-option">First</div>
    <div class="ac-option ac-hilite">Second</div>
  </div>
</template>

With as common and data-enriched applications are becoming, this feature could also revive a little more popularity for the Meteor framework and AutoForm by adding an elegant solution to the quiver of modern application and UX development tools.

Alternatives Considered

All the suggested add-on packages were taken into consideration and evaluated prior to deciding to pursue this. None are up-to-date and all rely on external libraries for functionality, such as the old typeahead solution from Bootstrap 3 (now deprecated). The use of a select was also taken into consideration, but as mentioned, proved inefficient. In the use case that we are implementing in our venture, we require a live list of currency "asset pairs" that varies between exchanges, so we demand a reactive list of autocomplete options to speed the process of populating Orders.

Additional context

This issue is the product of a conversation started on Stack Overflow relating to issues associated with wanting to implement a custom autocomplete for AutoForm.

I'm going to move forward with this in the next few days for our project. I'd be humbled to contribute this back to the community if others find this useful and appropriate.