JavaScript Autocomplete for Spotfire (only web-player)

Note: This version only works on the web-player. It is smaller code, but uses the built-in html 5 autocomplete feature. Check out this other version that works also on the client.

Introduction

An input autocomplete is a feature commonly found in user interfaces that provides suggested or completed text as the user types into a text input field. This approach uses html5 and only works on the web player

The autocomplete feature works by analyzing the user's input, searching for matching strings from a predefined list or database, and then providing suggestions that the user can select or ignore. This can save time and effort for the user, as they may not need to type the entire text or remember the exact spelling of the word they are looking for.

Input autocomplete is commonly used in search fields, address fields, and forms with repetitive information, such as credit card numbers or email addresses. It can help improve the user experience by making it faster and easier to complete forms or find information, while also reducing the likelihood of errors or misspellings.

Here is how it looks like in Spotfire

How it works

An Spotfire Input Property Control in enhanced through JavaScript leveraging the datalist tag. 

Requirements

A Calculated Column to create the required options for the <datalist> tag
An Spotfire Input Property Control that will be linked to the <datalist> tag
A Calculated Value Dynamic Item to render the calculated column on a hidden tag
A JavaScript to glue all these things together

Example

Step 1: Create a calculated column ("options") with the input data. For example:

 "<option value=""" & [Holders] & """>" as [options]

 <a id="autocompleteElement"><SpotfireControl id="60e360db89924916ab4790b20e85d339" /></a>

 UniqueConcatenate([options])

 <a id="autocompleteElement-data" hidden ><SpotfireControl Calculated Value Dynamic Item goes here /></a>

//Note: only works on webplayer 
//html:
//<a id="autocompleteElement"><input /></a>
//<a id="autocompleteElement-data" hidden >uno,dos,tres,cuatro</a>    

function setupAutocomplete(id) {
  const autocomplete = document.querySelector("#"+id+" input");
  autocomplete.setAttribute("list",id+"-datalist");
  const datalist = document.createElement("datalist");
  datalist.id=id+"-datalist";
  document.body.appendChild(datalist);
  const data = document.getElementById(id+"-data");

  const setData = () => {
    datalist.innerHTML = '';
    data.innerText.split(',').forEach(item => {
      let option = document.createElement('option');
      option.value = item;
      datalist.appendChild(option);
    });
  }

  //run setData as soon as the calculated value changes
  const mutationObserver = new MutationObserver(setData);
  mutationObserver.observe(data, {subtree: true, childList: true} );
  setData(); // populate the datalist initially
}

setupAutocomplete("autocompleteElement");

Here is is an example on how everything looks together:

Back to the JavaScript Component Hub for Spotfire