Hi Ann Kemp,

You can hook your events and its handlers, among which onblur and onkeyup, on the input using the input properties, like this:

Hope it helps.

Cheers,

João

And when you have a dropdownsearch-widget?

The dropdown works fine! You can select and add items but now I want the user also to be able to add totally new items and that's what i want to do with the extra added javaScript, it works (a little bit different) in traditional web app. Now I want to make it also in mobile, the functionality to add totally new items on-keystroke-return (key==13) in javaScript.

Hi Ann,

When I add to implement the scenario you are describing, there was always a different way to do it on UX like a button "Add another option". The reason for that was (according to the UX designer on the team) that it would be very confusing for the user to be on a select widget where he after all can add a new one.

Nonetheless, if I was implementing your use case I would have an input and on the OnChange of that input, I would show a block below with the options (the block would have a query filtered based on the value typed). If user would select one of the options, I would save the selected Id in the Local Variable (through the event of the block). If when the user submits his info, the Id was empty, then I would save it as a new option.

I hope it helps.

Cheers,

João

Yes, I know it! The UX-thing. But my boss asks it explicitly this way.
Mmm, I will take a look at it for the second part ...

Hi Ann,

I tried the same use-case with the below mentioned JS and it's working as expected

See this sample app - SearchDropdownDemo

- Define a JS node with search Dropdown Element Id as input parameter in the OnReady Event Handler

function check(e) {
    if(e.keyCode === 13) {
        alert('you pressed return key!');
    } else {
        console.log(e.keyCode);
    }
}

var ddEle = document.getElementById($parameters.ElementId);
ddEle.addEventListener('keyup', check);

Hope this helps you!

Regards,

Benjith Sam

Yes, it works better! I can put an EventListener on the widget now! The alerts are working now!
But I still can't get the typed in value out of the widget.

Hi Ann,

Could you please check with the below mentioned code..

See this sample app - SearchDropdownDemo

function check(e) {
    if(e.keyCode === 13) {
        var ele = document.getElementById($parameters.ElementId);
        var inputValue = ele.querySelector('.choices__input--cloned').value;
        console.log(inputValue);
        alert(inputValue);
    }
}

var ddEle = document.getElementById($parameters.ElementId);
ddEle.addEventListener('keyup', check);

Hope this helps you!

Regards,

Benjith Sam