Add Autocomplete to an existing Spotfire input control (only webplayer)

Step 1
. Create a calcualted colum with the input data. For example:

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

Step 2. Edit the html of a Text Area and Create an Input Property Control and wrap it with an identified tag. Example:

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

Step 3. Create a Calculated Value that concatenates the unique values of the calculated column in step 1:

UniqueConcatenate([options])

Step 4. Wrap the Calcualted Value with an iddentified hidden tag. The id is the same as the id from step2 + "-data" sufix.  For example:

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

Step 5: Add the following javascript

//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");

Step 6: Save the analysis to the library and open it on web player because autocomplete does not work on the client.

Here is how everything looks together: