Gibt es eine Möglichkeit, die Autovervollständigung für ein Kombinationsfeld an einer beliebigen Stelle im Text beginnen zu lassen, lassen Sie mich ein Beispiel geben. Wenn ich jemanden namens John Smith in der Combobox habe, wenn ich mit dem Buchstaben "j" beginne, wird John Smith angezeigt, aber ich möchte nicht mit dem Buchstaben "s" beginnen, um nach seinem Nachnamen zu suchen, ist das möglich?
Antworten
Zu viele Anzeigen?
Igor Klimer
Punkte
15301
Haben Sie sich angesehen SuggestBox ? Die MultiWordSuggestOracle die die Daten an die Suggest Box weiterleitet, scheint genau das zu tun, was Sie wollen - siehe die Javadocs für die Verwendung und Beispiele.
Aktualisierung: Hier ist ein sehr schönes Beispiel für die Anpassung von GWTs SuggestBox wie die auf Facebook aussehen: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete Folgen Sie unbedingt allen Links in diesem Tutorial, denn sie enthalten viele Informationen über die Verwendung der SuggestBox .
Ednilson Campos
Punkte
187
Ich war haben keine Probleme mit AdvancedComboBoxExample sencha http://www.sencha.com/examples/#ExamplePlace:advancedcombobox
Ich fand in diesem Link http://www.sencha.com/forum/showthread.php?222543-CRTL-C-triggers-a-reload-of-data-in-Combobox die Antwort auf mein Problem.
Ich musste einige Anpassungen an meinem Code vornehmen. Unten ist der Code für diejenigen, die ihn brauchen.
ComboBox ajax ohne Blättern:
import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.google.gwt.user.client.rpc.AsyncCallback;
import java.util.List;
import java.util.Map;
public class AjaxComboBox<T extends ModelData> extends ComboBox<T> {
public AjaxComboBox() {
}
public interface GetDataCallback<T> {
void getData(String query, AsyncCallback<List<T>> dataCallback);
}
public AjaxComboBox(final String displayField, final int minChars, final GetDataCallback<T> getDataCallback) {
final RpcProxy<ListLoadResult<T>> proxy = new RpcProxy<ListLoadResult<T>>() {
@Override
protected void load(final Object loadConfig, final AsyncCallback<ListLoadResult<T>> callback) {
ListLoadConfig load = (ListLoadConfig) loadConfig;
final Map<String, Object> properties = load.getProperties();
getDataCallback.getData((String) properties.get("query"), new AsyncCallback<List<T>>() {
public void onFailure(Throwable caught) {
caught.printStackTrace();
}
public void onSuccess(List<T> result) {
callback.onSuccess(new BaseListLoadResult<T>(result));
}
});
}
};
final BaseListLoader<ListLoadResult<T>> loader = new BaseListLoader<ListLoadResult<T>>(proxy);
final ListStore<T> store = new ListStore<T>(loader);
setFieldLabel(displayField);
setStore(store);
setHideTrigger(true);
setMinChars(minChars);
setWidth(300);
}
}ComboBox träge mit Blättern
import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.google.gwt.user.client.rpc.AsyncCallback;
import java.util.Map;
public class ComboBoxLazy<T extends ModelData> extends ComboBox<T> {
public interface GetPagingDataCallback<T> {
void getData(String query, PagingLoadConfig loadConfig,
AsyncCallback<PagingLoadResult<T>> dataCallback);
}
public ComboBoxLazy(final String displayField, final int minChars,
final GetPagingDataCallback<T> getDataCallback) {
final RpcProxy<PagingLoadResult<T>> proxy = new RpcProxy<PagingLoadResult<T>>() {
@Override
protected void load(Object loadConfig,
final AsyncCallback<PagingLoadResult<T>> callback) {
final Map<String, Object> properties = ((PagingLoadConfig) loadConfig).getProperties();
getDataCallback.getData((String) properties.get("query"),
((PagingLoadConfig) loadConfig),
new AsyncCallback<PagingLoadResult<T>>() {
@Override
public void onSuccess(
final PagingLoadResult<T> result) {
callback.onSuccess(result);
}
@Override
public void onFailure(Throwable caught) {
callback.onFailure(caught);
}
});
}
};
ModelReader reader = new ModelReader();
final BasePagingLoader<PagingLoadResult<T>> loader = new BasePagingLoader<PagingLoadResult<T>>(
proxy, reader);
loader.addListener(Loader.BeforeLoad, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
be.<ModelData>getConfig().set("start",
be.<ModelData>getConfig().get("offset"));
}
});
setFieldLabel(displayField);
final ListStore<T> store = new ListStore<T>(loader);
setStore(store);
setHideTrigger(true);
setMinChars(minChars);
setPageSize(10);
setWidth(300);
}
}Klassenarbeit
import br.ueg.escala.client.view.ConversorBeanModel;
import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import java.util.List;
public class ComboBoxTest extends LayoutContainer {
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
criarComboBox();
criarComboBoxLazy();
}
private void criarComboBox() {
final AjaxComboBox<BeanModel> combo = new AjaxComboBox<BeanModel>("name", 3, new AjaxComboBox.GetDataCallback<BeanModel>() {
public void getData(String query, final AsyncCallback<List<BeanModel>> dataCallback) {
servico.loadLike(query, new AsyncCallback<List<Person>>() {
public void onFailure(Throwable caught) {
caught.printStackTrace();
}
public void onSuccess(List<Person> result) {
List<BeanModel> dados = ConversorBeanModel.getListBeanModel(result);
dataCallback.onSuccess(dados);
}
});
}
});
combo.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
BeanModel bm = combo.getView().getSelectionModel().getSelectedItem();
Person p = bm.getBean();
combo.setValue(bm);
try {
combo.setValue(bm);
combo.setRawValue(p.getName());
} catch (Exception e) {
e.printStackTrace();
}
}
});
combo.setItemSelector("div.search-item");
combo.setTemplate(getTemplate());
addText("Any text");
add(combo);
}
private void criarComboBoxLazy() {
String field = "name";
final ComboBoxLazy<BeanModel> comboLazy = new ComboBoxLazy<BeanModel>(field, 3, new ComboBoxLazy.GetPagingDataCallback<BeanModel>() {
public void getData(String query, PagingLoadConfig loadConfig, final AsyncCallback<PagingLoadResult<BeanModel>> dataCallback) {
final PagingLoadConfig load = (PagingLoadConfig) loadConfig;
servico.loadLike(load, new Person(), "name", query, new AsyncCallback<List>() {
public void onFailure(Throwable caught) {
caught.printStackTrace();
}
public void onSuccess(List result) {
PagingLoadResult<BeanModel> dados = ConversorBeanModel.getPagingLoadResultBeanModel(result, load);
dataCallback.onSuccess(dados);
}
});
}
});
comboLazy.addSelectionChangedListener(new SelectionChangedListener<BeanModel>() {
@Override
public void selectionChanged(SelectionChangedEvent<BeanModel> se) {
BeanModel bm = comboLazy.getView().getSelectionModel().getSelectedItem();
Person p = bm.getBean();
comboLazy.setValue(bm);
try {
comboLazy.setValue(bm);
comboLazy.setRawValue(p.getName());
} catch (Exception e) {
e.printStackTrace();
}
}
});
comboLazy.setItemSelector("div.search-item");
comboLazy.setTemplate(getTemplate());
VerticalPanel vp2 = new VerticalPanel();
vp2.setSpacing(10);
vp2.addText("<span class='text'><b>Combo lazy</span>");
vp2.add(comboLazy);
add(vp2);
}
private native String getTemplate() /*-{
return [ '<tpl for="."><div class="search-item">',
' <h3> <span> Name:</span> <span style="font-weight:normal;">{name}</span> ',
' <span> - Last name:</span> <span style="font-weight: normal">{lastName}</span></h3>', '</div></tpl>'].join("");
}-*/;
}Anwendung.css:
.searchItem {
font: normal 11px tahoma, arial, helvetica, sans-serif;
padding: 3px 10px 3px 10px;
white-space: normal;
color: #555;
}
.searchItem h3 {
display: block;
font: inherit;
font-weight: bold;
color: #222;
}
.searchItem h3 span {
float: right;
font-weight: normal;
margin: 0 0 5px 5px;
width: 100px;
display: block;
clear: none;
}Code-Server
public List loadLike(PagingLoadConfig config, Person classe, String field, String query) {
List<Person> list = null;
try {
List listEntity = genericoBC.loadLike(config.getOffset(), config.getLimit(), field, query, classe.getClass());
list = clone(listEntity);
final int totalCount = genericoBC.contarRegistros(classe.getClass());
config.setLimit(totalCount);
} catch (Exception e) {
tratarExcecao("", e);
}
return list;
}
public List<Person> loadLike(String query) {
List<Person> list = null;
try {
List<Person> listEntity = genericoBC.loadLike(query);
list = clone(listEntity);
} catch (Exception e) {
tratarExcecao("Error:genericoBC.loadLike(query)", e);
}
return list;
}
Tapanayan Manna
Punkte
21
Überschreiben Sie die Methode boolean isFiltered(ModelData record, String property) der ListStore Der Körper der Methode wird wie folgt aussehen:
if (filterBeginsWith != null && property != null) {
Object o = record.get(property);
if (o != null) {
if (!o.toString().toLowerCase().contains(filterBeginsWith.toLowerCase())) {
return true;
}
}
}
if (filters != null) {
for (StoreFilter filter : filters) {
boolean result = filter.select(this, record, record, property);
if (!result) {
return true;
}
}
}
return false;
Joel
Punkte
442
Dies ist für GXT 3.0.
Erstellen Sie zunächst eine Instanz der überschriebenen ListStore-Klasse wie folgt:
public static class MyListStore extends ListStore<Course>{
private String userText="";
public MyListStore(ModelKeyProvider<Course> k){
super(k);
}
@Override
protected boolean isFilteredOut(Course item) {
boolean result = false;
if(item.getTitle()!=null &&
!item.getTitle().toUpperCase().contains(userText.toUpperCase())){
result = true;
}
return result;
}
public void setUserText(String t){ userText = t; }
}In diesem Fall hatte ich eine Kursmodellklasse, die den Kurstitel (eine Zeichenfolge) als Beschriftungsanbieter für die Combobox hatte. Gehen Sie also in Ihrer überschriebenen Klasse ähnlich vor: Verwenden Sie Ihr spezifisches Modell (den Typ dieser Instanz der Combobox) anstelle von "Course" im obigen Code.
Als Nächstes erstellen Sie eine Instanz dieses Speichers zur Verwendung durch die Combobox:
private MyListStore courses ;Als Nächstes stellen Sie sicher, dass Sie die Combobox entsprechend initialisieren. In meinem Fall habe ich uibinder verwendet, also ist mein Initialisierer dieser:
@UiFactory
ListStore<Course> createListStore() {
courses = new MyListStore(courseProps.key());
return courses;
}Die relevanten uibinder-Schnipsel:
<ui:with type="com.sencha.gxt.data.shared.LabelProvider" field="titles"/>
<ui:with type="com.sencha.gxt.data.shared.ListStore" field="courses"/>
...
<form:ComboBox ui:field="classTitle" store="{courses}" labelProvider="{titles}"
allowBlank="false" forceSelection="true" triggerAction="ALL" width="200" />Natürlich ist die Verknüpfung mit Ihrer gebundenen Java-Klasse:
@UiField ComboBox<Course> classTitle;Und stellen Sie schließlich sicher, dass Sie das Keyup-Ereignis von der Combobox-Eingabe behandeln:
classTitle.addKeyUpHandler(new KeyUpHandler(){
@Override
public void onKeyUp(KeyUpEvent event) {
courses.setUserText(classTitle.getText());
}
});Das hat perfekt funktioniert (zum ersten Mal!).
