JavaScript Searchable Dropdowns

Here are different ways to enhance a Dropdown-list Property Control. It requires a new filtering scheme just to update the document property

A simple Dropdown-list property control looks like this:

The map below is limited by a document property expression:

upper([Store Name]) ~= Upper("${selection}")

But it is hard to find or search for a value in a long dropdown list, so with a little tweak on the text area html and a script, we can use filters to help get the value

This code enhances a dropdown list with a search filter. HTML sets up the structure, JavaScript manages interactions (show/hide filter on button clicks and updates input on selection), and CSS controls visibility. This allows easier searching and selection in long dropdown lists.

html

<div id="myInput" >
  <span class="ddown"><SpotfireControl id="dropdown list property control" /> <span class='srchBtn'>⋯</span> </span>
  <span class="sfFltr hidden"><SpotfireControl id="filter item" /> <span class='closeBtn'>✕</span> </span>
  <div class="sfCalcVal hidden"><SpotfireControl id="label with First([Store Name])" /></div>
  <div class="sfInput hidden"><SpotfireControl id="hidden input field prop:'selection' /></div> 
</div>

JavaScript

//script params
target = "myInput"

//node elements
container = document.getElementById(target);
dropdown = document.querySelector(".ddown");
filter = document.querySelector(".sfFltr");
searchButton= document.querySelector(".srchBtn");
closeButton = document.querySelector(".closeBtn");
selection = document.querySelector(".sfCalcVal");
sfInput = document.querySelector(".sfInput input");

//events
searchButton.addEventListener("click",()=>{
    dropdown.classList.add("hidden")
    filter.classList.replace("hidden","visible")
    oldValue = sfInput.value
})

closeButton.addEventListener("click",()=>{
    dropdown.classList.remove("hidden")
    filter.classList.replace("visible","hidden")
    sfInput.focus();
    sfInput.blur();
}) 


//monitor selection 
observer = new MutationObserver((x)=>{
  sfInput.value = selection.innerText;
  closeButton.click();
})

observer.observe(selection, {childList: true,subtree: true});

//apply styling and attributes 
css = `<style>
.closeBtn, .srchBtn, .resetBtn, .okBtn{  
  vertical-align:top;
  cursor:pointer; 
}

.visible{
  position:fixed;
  z-index:1;
}

.hidden{
 position:fixed;
 z-Index:-1;
}
</style>`

container.insertAdjacentHTML('afterend',css)

The same script can be use even if we change the Property Control to a regular input

But if we want more filters with additional functionality with buttons to cancel, apply or reset filters we need to tweak the code

html

<div class="sfInput hidden"><SpotfireControl id="input field" /></div> 
<div class="sfCalcVal hidden"><SpotfireControl id="First (StoreName) Calculated value" /></div>

<div id="myInput" >
  <span class="ddown"><SpotfireControl id="Input field property: selection" /> 
    <span class='srchBtn'>⋯</span>
  </span>
  <span class="sfFltr hidden">
     <SpotfireControl id="region filter" />
     <SpotfireControl id="state filter" /> 
     <SpotfireControl id="city filter" />
     <SpotfireControl id="store name filter" /> 
     <span title="cancel" class='closeBtn'>✕</span>
     <span title="cancel" class='okBtn'>✓</span>
     <span title="reset" class='resetBtn'><SpotfireControl id="reset all filters action control" /> </span>
  </span> 
</div>

JavaScript

//node elements
container = document.querySelector("#myInput");
dropdown = document.querySelector(".ddown");
filter = document.querySelector(".sfFltr");
searchButton= document.querySelector(".srchBtn");
closeButton = document.querySelector(".closeBtn");
okButton = document.querySelector(".okBtn");
selection = document.querySelector(".sfCalcVal");
sfInput = document.querySelector(".sfInput input");

oldValue = null

//events
searchButton.addEventListener("click",()=>{
    dropdown.classList.add("hidden")
    filter.classList.replace("hidden","visible")
    oldValue = sfInput.value
})

closeButton.addEventListener("click",()=>{
    dropdown.classList.remove("hidden")
    filter.classList.replace("visible","hidden")
    sfInput.value = oldValue
    sfInput.focus();
    sfInput.blur();
}) 

okButton.addEventListener("click",()=>{ 
    dropdown.classList.remove("hidden")
    filter.classList.replace("visible","hidden")
})

//monitor selection 
observer = new MutationObserver((x)=>{
  sfInput.value = selection.innerText;
  sfInput.focus();
  sfInput.blur();
})

observer.observe(selection, {childList: true,subtree: true});

//apply styling and attributes 
css = `<style>
.closeBtn, .srchBtn, .resetBtn, .okBtn{  
  vertical-align:top;
  cursor:pointer; 
}

.visible{
  position:fixed;
  z-index:1;
}

.hidden{
 position:fixed;
 z-Index:-1;
}
</style>`

container.insertAdjacentHTML('afterend',css)

The Action control for the icon to reset filters is:

filteringSchemeName= "filtersForPropertyControls"
dataFilteringSelectionCollection = Document.Data.Filterings[filteringSchemeName]
filteringScheme = Document.FilteringSchemes[dataFilteringSelectionCollection]
filteringScheme.ResetAllFilters()

If we need

Sign In

JavaScript Searchable Dropdowns

Table of contents

User Feedback

Recommended Comments

Industries