Mobile: how to select a typed value in Dropdown Search with JavaScript

How can I select typed text in a Dropdown Search with Javascript in Mobile?

A screenshot of the dropdown in the browser:

Solution

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 searchInputValue = ele.querySelector('.choices__input--cloned').value;      
        var selectedValue = ele.querySelector('.choices__item--selectable').innerText;

        console.log(searchInputValue, selectedValue );
        //alert(selectedValue);
        //alert(searchInputValue );
    }
}

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

Hope this helps you!


Regards,

Benjith Sam

Solution

Yes, it did! Now I can indeed get the typed value out of the select! :)

If I may be so curious, where did you find this documentation?

querySelector('.choices__input--cloned').value

Ann Kemp wrote:

Yes, it did! Now I can indeed get the typed value out of the select! :)

If I may be so curious, where did you find this documentation?

querySelector('.choices__input--cloned').value

Hi Ann,

I just inspected the SearchDropdown element in the Browser (inspect Element section) and found out the input tag class, which is holding the selected value and referred the same in the JS selector to get the respective selected value.

Glad to help you :)


Regards,

Benjith Sam

Thx! This was really interesting!