String - Text Dropdown Hotkey Search

[wimtracking2]

I have a Multi-Select dropdown that has lots of options and is a String- Text field. I'd like to have a functionality wherein I can type a word, and it will search from the dropdown options or take the user to that option in the drop down list so they don't have to manually scroll through all the options to find it. This is a feature that is available in a standard text dropdown field.

See screenshot. If the user opens the dropdown and types "ger" they are taken down in the list to "Geriatrics". Is this available? Thank you,

[Tubby]

I think you will need a custom-coded field for that. I don't think there is a standard feature for that(but hoping there will be). I think I asked a similar one (but for dropdown) through support but it appears to be a paid thing so I didn't bother proceeding but you can try asking them about it if you are willing to. Unless, we have a blessing in disguise here that will generously provide a sample code for this type of autocomplete + dropdown combo 

[Volomeister]

Hi @wimtracking2

You can add the following JavaScript code snippet to the Header or Footer of your DataPage:

 

<script>
if (typeof addObserver == 'undefined') {
const addObserver = () => {
new MutationObserver (mutations=> {
  for(let i=0; i<mutations.length; i++) {
if(mutations[i].target.parentElement !=null) {
 if(mutations[i].target.parentElement.parentElement !=null ) {
  if(mutations[i].target.parentElement.parentElement.parentElement !=null) {
     if(mutations[i].target.parentElement.parentElement.parentElement.matches('#MultiSelectBox')) {
     addMultiSelectOptionSearch()
     break}}}}
}
}).observe(document.querySelector('body'), {childList: true, subtree: true})
}
const addMultiSelectOptionSearch = () => {
if (document.querySelector('#MultiSelectBox .cbFormMultiSelectText') == null || document.querySelector('#filterOptions') != null) return
let firstMultiSelectOption = document.querySelector('.cbFormMultiSelectText')
firstMultiSelectOption.insertAdjacentHTML('beforebegin', `<div class="cbFormMultiSelectText" style="outline: none; white-space: nowrap; overflow: hidden; margin-bottom: 25px;"><input type="text" id="filterOptions" style="position: absolute; width: 90%"></div>`)
addFilterSelectOptionsListener(document.querySelector('#filterOptions'))
}
const addFilterSelectOptionsListener = (HTMLTextInput) => {
if (HTMLTextInput==null) return
let parentContainer = HTMLTextInput.parentElement.parentElement
HTMLTextInput.addEventListener('input', (e)=>{
parentContainer.querySelectorAll('label').forEach(label=>{
if(label.innerText.toLowerCase().trim().includes(e.target.value.toLowerCase())) {
label.parentElement.style.display = 'block'
}
else label.parentElement.style.display = 'none'
})
})
}
addObserver()
}
</script>

Hope this helps

[wimtracking2]

@Volomeister This is working perfectly, thank you! @Tubby Did you see this?