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

//id can be a script parameter when using multiple autocompletes
id = "myTickers";
autocomplete = document.querySelector("#"+id+" input");
autocomplete.setAttribute("list",id+"-datalist");
datalist = document.createElement("datalist");
datalist.id=id+"-datalist";
autocomplete.parentNode.insertBefore(datalist,autocomplete);
data = document.getElementById(id+"-data");

setData = ()=>{datalist.innerHTML = data.innerText.replaceAll(",","")}

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

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

Here is how everything looks together: