Skip to main content
M
MA873117416-Pearl
16-Pearl
February 11, 2025
Question

Filter with select dropdown widet

  • February 11, 2025
  • 2 replies
  • 822 views

hello ptc community,

   Is it possible that i can have filter in dropdown widget which can give me values which i can write in the field like for eg testing_value1, value2 are in the drop down and if i write val then suddenly these match value appears in the dropdown. Please let me know if its possible.

 

Thank you so much

2 replies

M
MA873117416-PearlAuthor
16-Pearl
February 12, 2025

@RolandRaytchev  would you please share your opinion in this regard. thank you

R
RolandRaytchev21-Topaz I
21-Topaz I
March 5, 2025

Hi @MA8731174 ,

the dropdown widget - is here the 2D select widget meant?

Let's suppose that the  select widget  is meant.  Depending on that for where we will get  the data we can use different approaches .

Here for example we use a value of one list and change the value of the second list. - so means we can generate a list dynamically and set it to the list property of the  select widget so that a new list is displayed.

 

2025-03-05_11-27-18.jpg 

Here in the example the value of one list is a filter for the second list. But you can use e.g. also a value of input widget that will also work

You can also add a new element to a list  etc.  

So possibly when you input a value /in input widget /then in the change event you will check the list  and filter it or find specific value and then set the the List and value property of the select widget issue- possibly  there is difference between the displayed name and the value . 

    M
    MA873117416-PearlAuthor
    16-Pearl
    March 5, 2025

    Thank you so much for this clarification. I have only one list and want to write something first and filter and as you have mentioned that i can used input field to write something first and then with onchange function of it i can prepare my list and assign it to my select widget but question is how can i open the list without clicking on the select widget? is it possible because i cannot see the binding option to open the select widget on any kind of event. Please guide me further in this regard. Secondly about your approach with two select widgets when u select from first dropdown how you are opening the second list with clicking on the value in the first checklist. I am looking forward to hearing from you soon.

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    March 5, 2025
    • so far I know we can not input the value directly. so when the select widget  is in focus then clicking a key will causes that it will the first displayed element in the list starting by that key. A second time click that will select the next element starting with that character.But that is the behavior in chrome browser - preview mode and this behavior is different on the mobile. You can not select any key when you do not have an UI for that - means you need to have an element what allows the keypad to be used on the mobile device therefore you need a input element in the 2D mashup or you need to call a popup which allow the filter.

    2025-03-05_17-21-49.jpg

    then filter that in the input

    2025-03-05_17-20-51.jpg

     

    • regarding filter. So you can filter the where you change the ListProperty using some js code example

     

    $scope.app.testListFilter=(theArray,filterKey)=>{
let retArr=[]
theArray.forEach(element => {
 if(~element.display.toLowerCase().indexOf(filterKey.toLowerCase())) retArr.push(element) 
});
return retArr;
}

     

    the first argument is the list and the second is the filter string locking into to mach display fields and it return the filtered list

    You can use also a filter to filter the data in the list from the binding  , but there  is difficult to use a $scope variable. Possibly somebody could help - how to use a $scope variable into the filter function. What will work is to use the window object e.g. window.myVar

    2025-03-05_17-32-25.jpg

    where I used some code for the binding filter :

     

    retArr=[]
let filterKey=window.my_filter
value.forEach(element => {
 if(~element.display.toLowerCase().indexOf(filterKey.toLowerCase())) retArr.push(element) 
});
return retArr;

     

    But here we need to do some action so that the list should "know" that filter changed and to update. When data changes that will update using the current setting of the variable my_filter ... but changing the my_filter windows variable itself will not update  the list automatically-because the binding  filter will not fire at this point.

     

    Terms & ConditionsCookie settingsAccessibility statement