2010-02-27 5 views
11

В любом случае, чтобы автозаполнение для комбинированного поля начиналось с любого места в тексте, позвольте привести пример. Если у меня есть кто-то по имени john smith в combobox, если я начну с буквы «j», он подтягивает john smith, но меньше говорит, что я хочу начать с буквы «, чтобы искать его фамилию», возможно, если это так кто-нибудь имеет код или ссылку на код, который делает это.combo box autocomplete

+0

Проверить http://dev.arcbees.com/gwtchosen/ основан на GQuery –

ответ

12

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

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

2

Override метод булево isFiltered (ModelData запись, String свойство) из ListStore в теле метода combobox.The будет следующее:

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

Я был у вас возникли проблемы с AdvancedComboBoxExample сенча 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; 
} 
0

Это для 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; } 
} 

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

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

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 со входа combobox:

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

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