Create a native 'autocomplete' type for afQuickfield
in AutoForm
that is Bootstrap themed.
#1700
Labels
Milestone
afQuickfield
in AutoForm
that is Bootstrap themed.
#1700
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 existingautocomplete
andtypeahead
"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 containsautocomplete.js
andautocomplete.html
. The basic code for these is included below.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 usingReturn
, touch, or mouse click.Options for the autocomplete can be set two ways:
autoform.options
inside asimpl-schema
definition. Much like the options used in aselect
type.ReactiveVar
or function helper set ondata-autocomplete-options
in the user'safQuickfield
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 theform-control
class and styles get applied.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 aselect
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.
The text was updated successfully, but these errors were encountered: