Jump to content

String - Text Dropdown Hotkey Search

Recommended Posts

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,

Screenshot 2023-04-06 110907.png

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

  • 2 weeks later...

Hi @wimtracking2

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


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')) {
}).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>`)
const addFilterSelectOptionsListener = (HTMLTextInput) => {
if (HTMLTextInput==null) return
let parentContainer = HTMLTextInput.parentElement.parentElement
HTMLTextInput.addEventListener('input', (e)=>{
if(label.innerText.toLowerCase().trim().includes(e.target.value.toLowerCase())) {
label.parentElement.style.display = 'block'
else label.parentElement.style.display = 'none'

Hope this helps

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...