bandbox autocomplete

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

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

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

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 ??

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

Senthilchettyin
2623 ● 3 ● 8
http://emrpms.blogspot.in...

Any example on this ?

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

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.

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

Senthilchettyin
2623 ● 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 ?

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

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

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

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;
        }
    }
}

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

Senthilchettyin
2623 ● 3 ● 8
http://emrpms.blogspot.in...

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

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

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.