Combobox Select Item by Keyinput

asked 2023-07-05 14:29:36 +0800

NetLaborlw gravatar image NetLaborlw

updated 2023-07-05 14:31:56 +0800


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.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2023-07-08 02:12:54 +0800

MDuchemin gravatar image MDuchemin
2390 1 6
ZK Team

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:


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2023-07-05 14:29:36 +0800

Seen: 5 times

Last updated: Jul 08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More