-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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
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
Any pointers on how to do implement?
Any example on this ?
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.
Thank you benbai.
Combobox with popup ? In the popup, can we show the list box with three columns ?
Could be explain little bit ?
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
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;
}
}
}
Thank you benbai, but it is not working in zk fiddle here
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.
Asked: 2010-02-14 22:25:50 +0800
Seen: 667 times
Last updated: Nov 07 '13