поле со списком автозаполнение

Question

Есть ли в любом случае иметь автозаполнение для поля со списком, чтобы начать с любого места в тексте, позвольте мне привести вам пример. Если у меня есть кто-то по имени Джон Смит в поле со списком, если я начинаю с буквы «j», это вызывает Джона Смита, но меньше говорят, что я хочу начать с буквы «s», чтобы найти его фамилию, возможно ли это, если да? у кого-нибудь есть код или ссылка на код, который это делает.

Answer 1

Вы смотрели на SuggestBox? MultiWordSuggestOracle, который подает данные в окно предложения, похоже, делает именно то, что вы хотите - см. Javadocs для использования и примеры.

Обновление: Вот довольно хороший пример настройки SuggestBox GWT для отображения в Facebook: http://raibledesigns.com/rd/entry/creating_a_facebook_style_autocomplete Обязательно следуйте всем ссылкам в этом руководстве, так как они содержат много информации об использовании SuggestBox.

Answer 2

У меня были какие-либо проблемы с AdvancedComboBoxExample sencha http://www.sencha.com/examples/#ExamplePlace:advancedcombobox

Я нашел по этой ссылке http://www.sencha.com/forum/showthread.php?222543-CRTL-C-triggers-a-reload-of-data-in-Combobox ответ на мою проблему.

Мне пришлось внести некоторые коррективы в мой код. Ниже приведен код для тех, кому это нужно.

ComboBox ajax без подкачки:

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 ленивый с подкачкой

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

}

Класс теста

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("");
    }-*/;

}

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

Код сервера

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

Answer 3

Переопределить метод логическое значение isFiltered (запись ModelData, свойство String) из ListStore поля со списком. Тело метода будет следующим:

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;

Answer 4

Это для GXT 3.0.

Сначала создайте экземпляр переопределенного класса ListStore следующим образом:

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

В этом случае у меня был класс модели курса с заголовком курса (строкой) в качестве поставщика меток для комбинированного списка. Так что в вашем переопределенном классе сделайте аналогичное: используйте вашу конкретную модель (тип этого экземпляра комбинированного списка) вместо «Курса» в приведенном выше коде.

Затем создайте экземпляр этого магазина для использования в выпадающем списке:

  private MyListStore courses ;

Далее, убедитесь, что вы соответствующим образом инициализировали комбинированный список. В моем случае я использовал uibinder, поэтому мой инициализатор такой:

  @UiFactory
  ListStore<Course> createListStore() {
    courses = new MyListStore(courseProps.key());
    return courses;
  }

Соответствующие фрагменты uibinder:

  <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" />

Конечно, связь с вашим связанным Java-классом:

  @UiField ComboBox<Course> classTitle;

И, наконец, убедитесь, что вы обрабатываете событие keyup из ввода в поле со списком:

classTitle.addKeyUpHandler(new KeyUpHandler(){
  @Override
  public void onKeyUp(KeyUpEvent event) {
    courses.setUserText(classTitle.getText());
  }
});

Это сработало отлично (впервые!).