16
Views
4
Comments
Search dropdown value if no results is found

Hi All,

How can i get the value typed in search dropdown if no results is found? I want the typed value to be in my varaible.



Rank: #157

Hello SerMarvs,

Hope you're doing well :)


You should be able to do if you find that element in your HTML. You can do it using JavaScript, trying to get the element and its associated value.

I did some tests and let me share them with you :)


1) So, I have this DropdownSearch widget in my page. As you can see, here's the element that I want to identify:


2) So I did a simple JavaScript to get the element (by its class) and its respective value:

var element = document.getElementsByClassName("choices__input choices__input--cloned");
$parameters.TypedValue = element[0].value


So if I type something in that element, I can get the value:


3) Usually, I always prefer to get the element by its ID instead of its class. So I found an alternative for this :)

I gave a name to the DropdownSearch element: DropdownTest. As such, this will become the ID in the HTML page for my entire dropdown element. I know that this is not the element that we want, but this will become the ID of the parent element.

So I did another JavaScript to get the element that we want, using his parent (DropdownTest element referred above) and using getElementsByTagName method:

var parent = document.getElementById("DropdownTest");
var descendants = parent.getElementsByTagName("input");

$parameters.TypedValue = descendants[0].value;


Please refer to attached OML with these implementations to get the typed value.


Hope that this helps you!


Kind regards,

Rui Barradas

DropdownSearch.oml

Rank: #222

Hi Ser,

It is a very good question!!

I think by default it is not possible... However I cloned the component from OutSystemsUI and changed it for you.

I'm attaching the .oml you can check it working here for now... but maybe this link will expire soon, since it is from my personal env.
But don't worry every thing is in the file attached.

What I did in the component was to add a new listener in the search:


This component is based on https://github.com/jshjohnson/Choices#readme as I saw in the JS file, so it was easy to see what types of events it had, and for our luck, one of them were the search. 


As I pointed in the image, to use it you will have to also copy this script.


In this custom listener, I'm calling a new action (GetValueOnSearch) which ends up triggering the on change event, and you can use the value in your logic then.


The sample on how to use is in the Screen2.


EDIT: It is a little different from Rui's Solution, I had not saw that.. while I was working on my module he was fastest :)


I really hope it helps,
Cheers and Regards,

RR :)

ChartsSample.oml