Skip to Content (Press Enter)
UserImage.jpg
Ann Kemp
95Views
4Comments
Solved
Mobile: how to select a typed value in Dropdown Search with JavaScript
Question

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

A screenshot of the dropdown in the browser:

0
0
02 Oct 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP
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

0
0
02 Oct 2020
Copy Link
UserImage.jpg
Ann Kemp

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
0
0
02 Oct 2020
Copy Link
2021-03-18 21-03-15
Benjith Sam
 
MVP

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

0
0
02 Oct 2020
Copy Link
UserImage.jpg
Ann Kemp

Thx! This was really interesting!

0
0
02 Oct 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.