Jump to content
  • JavaScript Autocomplete for Spotfire (only web-player)


    Enhance Spotfire Input Property Controls by adding suggested or recommended options available to choose from.

    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

     

    autocomplete.gif.e1f865209f31841ca37f336c784c6146.gif

    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]
     
    Step 2. Edit the html of a Text Area and Create an Input field Property Control ("ticker") and wrap it with an identified tag ("myTickers"). Example:
     
     <a id="autocompleteElement"><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 Calculated Value with an identified hidden tag. The id is the same as the id from step2 + "-data" suffix.  For example:
     
     <a id="autocompleteElement-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 is an example on how everything looks together:

    autocomplete.thumb.png.30c3bc8ba637ce5767e6d0699ac0bc39.png

    Back to the JavaScript Component Hub for Spotfire

    Disclaimer

    This method makes assumptions about the inner workings of Spotfire version 12.0.0 LTS Any analyses created using this hack may cause instability and performance issues and are likely to break when Spotfire is upgraded or hotfixed in the future.  Any issues resulting from applying this hack are not covered by Spotfire maintenance agreements and Support will not assist in troubleshooting problems with analysis files where this approach is used.

     


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...