Datalist Replacement for Autocompletion

Less than 80 LOC of JavaScript

Input Example

Focus the text input to open the list of all autocompletion entries.

• Pressing Enter autocompletes the entered text with content of active element.
• Supported keys are: Escape, Home, End, Enter, PageDown, ArrowDown, ArrowRight, PageUp, ArrowUp, and ArrowLeft.
• A mouse click autocompletes the entered text with content of clicked element.
• Scrolling of list changes the active element until it is visible to the user.
• The list entries are filterd by the entered text.
• The order of elements is determined once at construction.

Usage

You can style the component with any CSS framework.

• The active element is marked with class options.activeClass.
• A list entry is styled with options.liClass.

Source Code

The code of the component is contained within this document at the end of the HTML code.

HTML

Add the following HTML to your page and do not forget to add additional styles:

<div class="datalist-container">
   <input type="text" placeholder="Search...">
   <ul></ul>
</div>

Javascript

Initialize component with new DatalistInput(container, suggestions, options)

new DatalistInput(
   document.querySelector(".datalist-container"),
   [ 'Apple', 'Banana', 'Cherry', 'Mapped-Cherr_y' ],
   {
      activeClass: "active",
      liClass: "",
      aliases: {'Mapped-Cherr_y':'Cherry'}
   })

To adapt the filter algorithm of all suggestions shown in the list overwrite method match which is currently implemented as:

match(value) {
   const searchTerm = value.toLowerCase()
   return this.suggestions.flatMap( (text,id) =>
      text.toLowerCase().includes(searchTerm)
      || this.suggestions[this.idmap[id]]?.toLowerCase().includes(searchTerm)
      ? [{id, text}] : []
   )
}

• Property suggestions contains the array of all list entries given as argument in constructor.
• Property idmap maps the index of an alias to the expected value.

CSS

The container needs to be positioned to work as anchor point for the positioned list.

      .datalist-container { position: relative; }

The data list for autocompletion needs a little more styling and is positioned absolute.
It should not be displayed display:none initially and positioned below the text input field with top:100%. With left:0;right:0 the list takes the whole width of the container.
Use max-height and overflow-y:auto to set the maximum height of visible entries and to enable scrolling.

.datalist-container ul {
   display: none;
   position: absolute;
   cursor: pointer;
   border: 1px solid rgba(33,37,41,0.25);
   top: 100%;
   left: 0;
   right: 0;
   max-height: 200px;
   overflow-y: auto;
   z-index: 1000;
   margin: 1px 0 0;
   padding: 0;
   list-style-type: none;
   background-color: #fff;
}

Style the list entries to show the mouse position and the active entry which is chosen by pressing Enter.

.datalist-container ul li {
   padding: 1em;
}
.datalist-container ul li:hover {
   background-color: rgba(33,37,41,0.05);
}
.datalist-container ul li.active {
   background-color: cadetblue;
}