0

bandbox autocomplete

asked 2010-02-14 22:25:50 +0800

kesavkolla gravatar image kesavkolla
180 3

Is it possible to have autocomplete on bandboxes? Combobox has autocomplete option but bandbox I can't find any.
It would be good to have autocomplete on bandbox also.

-kesav

delete flag offensive retag edit

12 Replies

Sort by ยป oldest newest

answered 2010-02-18 21:56:28 +0800

samchuang gravatar image samchuang
4084 4

Hi

I think because bandboxes can contain any component, so that why it could not have the autocomplete, banbox will not know how to compare.

On the other hand, you could still provide your own custom autocomplete to bandbox

link publish delete flag offensive edit

answered 2010-02-19 00:19:11 +0800

kesavkolla gravatar image kesavkolla
180 3

Any pointers on how to do implement?

link publish delete flag offensive edit

answered 2010-02-19 04:38:49 +0800

samchuang gravatar image samchuang
4084 4

Hi

I am thinking maybe could provide onChanging event and dynamic change the child view of the bandbox, but I am sure about the performance, are there any better ideas ??

link publish delete flag offensive edit

answered 2013-11-01 07:10:40 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2617 3 8
http://emrpms.blogspot.in...

Any example on this ?

link publish delete flag offensive edit

answered 2013-11-03 03:24:21 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Probably it would be easier that use combobox with popup? This case you can use the autocomplete function of combobox and handle popup content in Java code.

link publish delete flag offensive edit

answered 2013-11-03 05:50:21 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2617 3 8
http://emrpms.blogspot.in...

Thank you benbai.

Combobox with popup ? In the popup, can we show the list box with three columns ?

Could be explain little bit ?

link publish delete flag offensive edit

answered 2013-11-03 11:12:01 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Yes, you can use a listbox within a popup and specify it to combobox (and hide the original popup of that combobox) as mentioned in this document Popup

link publish delete flag offensive edit

answered 2013-11-03 14:21:03 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Not an easy task, finally it works:

test.zul

<zk>
    <style>
        .hiddenPopup {
            display: none;
        }
        .z-combobox-pp.combobox-with-another-popup {
            display: none !important;
        }
    </style>
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('test.TestVM')">
        <!-- the "another popup" -->
        <!-- hide popup after an item is selected -->
        <popup id="pp" sclass="@load(vm.popupClass)" onOpen="@command('openListbox')">
            <!-- get sub model based on combobox's value -->
            <listbox model="@load(vm.subModel)" height="100px" width="230px"
                onSelect="@command('updateStatus')">
                <listhead>
                    <listheader width="100px" />
                    <listheader width="100px" />
                </listhead>
                <template name="model" var="item">
                    <listitem>
                        <listcell label="@bind(item.firstName)"/>
                        <listcell label="@bind(item.lastName)"/>
                    </listitem>
                </template>
            </listbox>
        </popup>
        <!-- onChanging="@command('updateModel')" - display popup, update model -->
        <!-- onOpen='if (event.isOpen()) {pp.open(self, "after_start");pp.setSclass("");} else pp.close()' - 
            control open status manually, could be implemented with a custom component -->
        <!-- sclass="combobox-with-another-popup" - hide original popup -->
        <!-- value="@load(vm.value)" - update value when an item is selected -->
        <!-- popup="pp, after_start" - use another popup -->
        <combobox model="@load(vm.model)"
            onChanging="@command('updateModel')"
            onOpen='if (event.isOpen()) {pp.open(self, "after_start");pp.setSclass("");} else pp.close()'
            sclass="combobox-with-another-popup" 
            value="@load(vm.value)"
            popup="pp, after_start"/>
    </window>
</zk>

TestVM.java

package test;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.*;

import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.event.OpenEvent;
import org.zkoss.zk.ui.event.SelectEvent;

import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListModels;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListSubModel;
import org.zkoss.zul.ListModelList;

/**
 * tested with ZK 6.5.3
 * 
 * @author benbai
 *
 */
@SuppressWarnings({ "rawtypes", "unchecked" })
public class TestVM {
    /** full model */
    private ListModelList _model;
    /** combobox's value */
    private String _val = "";
    /** used to control sclass of popup */
    private boolean _open = false;
    // getters
    // get sub model
    public ListModel getModel () {
        if (_model == null) {
            List l = new ArrayList();
            for (int i = 0; i < 50; i++) {
                l.add(new Person(i+"-first", "last"));
            }
            _model = new ListModelList(l);
        }
        return ListModels.toListSubModel(_model);
    }
    // get matched items
    public ListModel getSubModel () {
        return ((ListSubModel)getModel()).getSubModel(_val, 15);
    }
    public String getPopupClass () {
        return _open? "" : "hiddenPopup";
    }
    public String getValue () {
        return _val;
    }
    // called when onChanging or onOpen of combobox
    @Command
    @NotifyChange({"popupClass", "subModel"})
    public void updateModel (@ContextParam(ContextType.TRIGGER_EVENT) InputEvent event) {
        String val = event.getValue();
        if (val == null) {
            val = "";
        }
        _val = val;
        _open = true;
    }
    // called when onSelect of listbox
    @Command
    @NotifyChange({"popupClass", "value"})
    public void updateStatus (@ContextParam(ContextType.TRIGGER_EVENT) SelectEvent event) {
        _open = false;
        _val = ((Listitem)event.getSelectedItems().iterator().next()).getValue().toString();
    }
    // called when onOpen of popup
    @Command
    @NotifyChange("popupClass")
    public void openListbox (@ContextParam(ContextType.TRIGGER_EVENT) OpenEvent event) {
        _open = event.isOpen();
    }
    public static class Person {
        private String _firstName;
        private String _lastName;
        public Person (String firstName, String lastName) {
            _firstName = firstName;
            _lastName = lastName;
        }
        public String getFirstName () {
            return _firstName;
        }
        public String getLastName () {
            return _lastName;
        }
        public String toString () {
            return _firstName + " " + _lastName;
        }
    }
}
link publish delete flag offensive edit

answered 2013-11-04 03:20:08 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2617 3 8
http://emrpms.blogspot.in...

Thank you benbai, but it is not working in zk fiddle here

link publish delete flag offensive edit

answered 2013-11-04 06:11:02 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

what does "not working" mean, your fiddle works for me (with some issues, of course), when you type some number in combobox (e.g., 10) the listbox will be updated and you can select item as needed.

link publish delete flag offensive edit
Your reply
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

Follow

RSS

Stats

Asked: 2010-02-14 22:25:50 +0800

Seen: 665 times

Last updated: Nov 07 '13

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