Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I use a lot of comboboxes with readonly="true" - as replacement of listbox with mold="select" - because of its better visuals and the greater flexibility they offer. Given a model containing the items "ab", "ae", "ec"; pressing the keys "a","e" selects the item "ec" instead of "ae". Is there a way to select the right item by spelling it, just as a listbox with the accoring mold behaves? I would love to see the combobox to actually display the entered characters (like readonly="false") but still be able to restrict the selected text to be one item of the model (like readonly="true").
Thank you,
All the Best Leo
P.S. Of course I could emulate that behaviour using the according events. However the beauty of readonly="true" is that it works clientside.
Hey there!
That use case is actually fairly close to that of the searchbox component. searchbox is in the EE package, however, so let's see which other options we have.
First stop would be this: To achieve what you describe, we first need to listen to the user's keystrokes, store the last known value of the combobox and use that instead of the input value to search comboitems.
Here's a sample of an override that does just that https://zkfiddle.org/sample/101bhih/1-Combobox-keystrokes
(run it, open the cb and type abcf)
Now the problem here is display. We can't use the input, because the input of a combobox is a value field. If we update the input value, we actually change the combobox state, which we don't want in readonly mode.
One possible option is to use the CSS function attr() to create a pseudo-element which content value is resolved from the attributes of the combobox. We can then float that element to the right, and style it however relevant, and use it to just display the currently buffered string:
https://zkfiddle.org/sample/31h60ig/2-combobox-keystroke-permanence-with-display
Asked: 2023-07-05 14:29:36 +0800
Seen: 5 times
Last updated: Jul 08
