Jump to content
  • JavaScript Autocomplete for Spotfire


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

    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.

     

    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 TIBCO 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 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 Calculated Value with an identified hidden tag. The id is the same as the id from step2 + "-data" suffix.  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
    
    autocomplete 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 web player because autocomplete does not work on the client.

    Here is how everything looks together:

    autocomplete.thumb.png.30c3bc8ba637ce5767e6d0699ac0bc39.png

    Back to the JavaScript Component Hub for Spotfire


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...