Clear combobox list on select

asked 2022-12-14 20:00:12 +0800

AnkitIan gravatar image AnkitIan
101 1

updated 2022-12-14 20:01:32 +0800

Hi My code is as follows:

  <combobox id="supervisors" 
   placeholder="${ b:l('str.workload.user_supervisor') }" 
   model="@load(vm.supervisors)" autodrop="true" 
                    <template name="model" var="user">
                        <comboitem  label="@load(user.name)"  />
       <listbox id="listbox_supervisorUsers" 
          selectedItems="@bind(vm.selectedSupervisorUser)" rows="4" multiple="true" 
          width="300px" height="300px"  model="@load(vm.supervisorUsers)" checkmark="true">
                    <template name="model" var="user">
                        <listitem label="@load(user.name)"/>
            <vbox vflex="1" pack="middle">
                <button label=">" onClick="@command('addUsersToUserGroup')"/>
                <button label="<" onClick="@command('removeUsersFromUserGroup')"/>
      <combobox id="listbox_userGroups" 
        placeholder="${ b:l('str.workload.user_group') }" 
        model="@load(vm.userGroups)" autodrop="true" 
        selectedItem="@load(vm.selectedUserGroup, before='clearSelection')" 
        onSelect="@command('showUserGroupUsers')" >
                    <template name="model" var="userGroup" id="listbox_userGroups_items">
                        <comboitem label="@load(userGroup.description)"  />
                <listbox id="listbox_groupUsers" rows="4" multiple="true" width="300px" height="300px" model="@load(vm.groupUsers)" selectedItems="@bind(vm.selectedUser)" checkmark="true">
                    <template name="model" var="user">
                        <listitem label="@load(user.name)" disabled="@load(user.disabledUser)"/>

When i click on first combobox then the information is displayed on other combobox but when i select again the first combobox the text inside the 2nd combobox does not get empty I want to empty the second combobox so that when a user clicks on a different item in the first combobox the text inside the second combobox is set to empty

Thanks in advance

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2022-12-19 14:04:06 +0800

MDuchemin gravatar image MDuchemin
2295 1 6
ZK Team

updated 2022-12-19 14:04:33 +0800

Hey there

Even though it is often used as a selection tool, combobox is actually a textbox with autocomplete.

The main field of textbox is "value" (the text value of the field), and that value doesn't need to be matching an entry from the model to be exist in the text input.

As a result, if you want to erase the value of the combobox, you need to bind the value="@load(vm.someStringValue)" and notify change on that value object (with the value itself being null or blank string).

If you only care about selecting a value from a list of values, with filtering: Check-out selectbox (EE): https://www.zkoss.org/wiki/ZKComponentReference/Input/Searchbox

link publish delete flag offensive edit


@MDuchemin I am relatively new to zk can you please elaborate

AnkitIan ( 2022-12-19 17:40:32 +0800 )edit

answered 2022-12-19 18:22:25 +0800

MDuchemin gravatar image MDuchemin
2295 1 6
ZK Team

Answer to comment under previous answer:


A ZK page is a structure of components. In your case, you are using a vbox, which contains a combobox, etc.

All of these objects have attributes which are used to control them.

If you consider a very simple component, like "textbox", there is one main attribute that'd you need to worry about: the value attribute. This attribute is used to control or read the text value of the textbox.

The textbox also have other attributes, like "placeholder", "multiline" or "type" which control how the textbox behaves or is rendered, but from a purely functional "type value, get value" type of situation, you'd want to use the "value" attribute.

Regarding combobox: Combobox is a textbox with extra features. One of the extra feature is the drop-down menu, which is intended to give value suggestion to the combobox. You can find the currently selected item (if any) or set an item as selected, or change the content of the drop-down. However, since combobox is not a dedicated "select" component, removing the drop-down values will not automatically remove the text value from the control. This is because the text value is not dependent on the drop-down. A user may type any value they want, even if the value is not a choice in the drop-down. From the combobox point of view, the most authoritative state is the text value of the input.

Now, the question is, do you need a control that provides "selection with search" or "text input with autocomplete"

If you want selection with search, I recommend you have a look to searchbox, selectbox, or bandbox, which can be used to make a "search and select" control. (searchbox is built for this purpose, selectbox and bandbox need additional controls such as a search field created manually, etc.)

If you want to use combobox, and you want to clear the text value, you'll need to add a binding to the value attribute:

<combobox [other="" attributes]="" value="@load(...)"/> and you will need to trigger this binding in your viewModel when you want to update the text value of the component. As mentioned above, the text value is not tied to the model value, so it needs to be updated separately on this specific component.

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: 2022-12-14 20:00:12 +0800

Seen: 8 times

Last updated: Dec 19 '22

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