How can a search glass icon be inserted in a search input field with auto-complete in a way that it is hidden when input is typed so the “blue cross” is showing only?
I tried several ways, among which hiding the icon when the value of the input field’s length > 0, but that doesn’t work because the value is not updated directly when typing. How can the above be achieved?
Thanks for any help.
This should have worked.
Does your syntax look something like this:
dmx-hide="input_search.value.length > 0"
This should be on the search icon tag.
Hey @sid, thanks for your reply!
The syntax looks like this:
<i class="fa fa-search fa-large main-search-glass" dmx-hide="(inp_search.value.length() > 0)"></i>
Also tried without the brackets:
<i class="fa fa-search fa-large main-search-glass" dmx-hide="inp_search.value.length > 0"></i>
However both ways it doesn’t work, probably because the search input is not updated until a autocomplete result is clicked and there’s no way to hide it on focus of the input field.
Oh. I missed reading that its auto complete.
Can you check if updated dybamic event is getting fired for the input when typing?
If it is, create a variable and set its value as 1.
On updated event, set it to 0.
Change the icon’s hide condition to this variable’s value.
Hi Sid,
Thanks for thinking along again, but unfortunately this is not the case:
If this updated dynamic event was triggered when typing in the input field, then it would be possible to hide the icon as a dynamic event even without the use of a value. But since this event is not fired on typing in the input field, I tried finding a solution using the input value length which apparently also doesn't work.
Here's another situation in which I would like to grab the typed contents of the auto-complete input field:
I can't believe this is just impossible, is it?
Teodor has replied on that post. That should work for you.
For this one, I don’t think I have solution yet. I haven’t tried it on my end.
You can most likely make this work with JS, if you know that.