Filter by search in a select menu

Wappler General Need Help
1

Hello everybody, I would like the list of the select menu to be filtered by user with the insertion of text, so that he can enter even a part of text (initial or final) and see the only options corresponding to his search

I have seen that it may be possible to do this with external components (select2-bootstrap-theme) but I have not been able to find a guide to this in Wappler.
I'm using Asp.net and bootstrap4.

Can anyone help me?
Thanks.

 <select id="select2" class="form-control form-control-lg" dmx-bind:options="utente_categoria.data.clienti" optiontext="aggregazionedesc" optionvalue="id" onchange="vai(this, 'categoria')" data-parametro="categoria" name="categoria" dmx-bind:value="query1.data.categoria" dmx-hide="utente_categoria.state.executing" required="" data-msg-required="Obbligatorio">
<option value="0">SELECT VALUE:</option>
 </select>
2

Sounds like a perfect use case for a Tagify text field set to Select. Just put your values/options in a recordset and use Tagify. Very simple to use. That's what I use.

<input type="text" class="form-control form-control-sm" id="inputAddApptCoach" name="inputAddApptCoach" aria-describedby="input3_help" is="dmx-tagify" mode="select" dmx-bind:data="autoCompleteStaff.data.custom" tag-text="full_name" tag-value="full_name" nocustom="true" required="">
1 Like
3

ok I will take it into account, but is it possible to search inside the words and not only in the initial letters?

4

Hi Mark, the Tagify component provides the functionality to search within the words.

5

OK could be the right choice.
Two questions about that
1-why when I click on the right arrow does not open the menu, as I see instead that it should happen in the examples on the forum?

recording

2-after the customer’s choice a button appears that makes it go to the next page. I have to bring two values: the code and the description of the chosen customer.
However the description is not passed to the next page, what am I doing wrong?

<button id="btn3" class="btn btn-lg btn-outline-dark" dmx-on:click="browser1.goto('user-inserisci.aspx?codice='+text1.value+'&amp;descrizione='+text1.Text)">CONTINUA</button>

tagify
tagify478Ă—703 44.8 KB

6

These are the options you have to sefine for the tagify.
Play around with them to see the results
I suppose that you want to set the mode to Select but please check it...

image
image396Ă—928 21.7 KB

As for the selected text:
use this
text1.items[0].clientidesc

1 Like
7

Because you need to set the min characters to 0.

Well this is not the same as a regular select input. The properties are different here. So you want to use:

'user-inserisci.aspx?codice='+text1.value+'&amp;descrizione='+text1.items[0].clientidesc
2 Likes
8

Thank you everybody

9

How can I increase the size of the font in select menu with tagify?

10

Solution:
i set in css

.tagify__tag {
            font-size: 18px;
}
.tagify__input {
            font-size: 18px;
}
.tagify__dropdown__item {
    font-size: 18px; 
}