移动端实现搜索框模糊匹配下拉显示原创
周飞宇
2人赞赏了该文章
130次浏览
编辑于2024年11月18日 11:33:43
摘要由AI智能服务提供本文简要描述了移动端搜索控件的需求、思路与方案及实现过程。需求为搜索控件支持模糊匹配和实时查询，用户无输入时列表隐藏。实现方案采用“实时搜索”+单据列表。实现过程包括开发页面、动态表单实现下拉列表、动态添加字段等。
有用
反馈
一、需求
移动端搜索控件支持模糊匹配，实时查询输入内容。用户没有输入任何内容时，该列表隐藏。用户输入内容时，输入内容改变后，下拉列表展示模糊匹配的内容。
二、思路与方案
2.1 分析思路
该需求主要涉及移动端搜索控件的使用，参考搜索控件的开发指南进行开发即可。
2.2 实现方案
使用 “实时搜索” + 单据列表实现。 用户没有输入任何内容时，该列表容器隐藏。用户输入内容时，输入内容改变后，都在插件中查询得到结果赋值到单据列表并显示容器
三、实现过程
1. 开发页面，其设计器界面如下图所示。
1、使用ShowType.InContainer把另一个移动动态表单嵌套到当前 移动单据（布局） 的某个容器中
showParameter.getOpenStyle().setTargetKey(targetKey); showParameter.getOpenStyle().setShowType(ShowType.InContainer);
2.子页面通过动态表单实现实时搜索的下拉列表。
@Override
public void registerListener(EventObject e) {
super.registerListener(e);
addClickListeners("entryentity");
CardEntry cardEntry = getControl("entryentity");
cardEntry.addRowClickListener(this);
}
@Override
public void initialize() {
super.initialize();
}
/**
* 界面显示前，触发此事件：向前端界面输出动态添加的字段、控件
* @remark
* 这个事件只能向前端界面添加字段、控件；后台的视图模型、数据模型，均没有改变
*/
@Override
public void loadCustomControlMetas(LoadCustomControlMetasArgs e) {
super.loadCustomControlMetas(e);
// 动态添加字段
CardEntryFlexPanelAp entryAp=this.createDynamicEntryAp();
Map<String, Object> mapEntry = new HashMap<>();
mapEntry.put(ClientProperties.Id,"cardentryflexpanelap");//指定添加到哪个容器
mapEntry.put(ClientProperties.Items,entryAp.createControl().get(ClientProperties.Items));
e.getItems().add(mapEntry);
}
@Override
public void beforeBindData(EventObject e) {
super.beforeBindData(e);
CardEntryFlexPanelAp addEntryAp=this.createDynamicEntryAp();
addEntryAp.setVisible(null);
Container control = (Container)this.getView().getControl("cardentryflexpanelap");
control.getItems().addAll(addEntryAp.buildRuntimeControl().getItems());
this.getView().createControlIndex(control.getItems());
}
private CardEntryFlexPanelAp createDynamicEntryAp() {
//初始化一个卡片布局容器
CardEntryFlexPanelAp cardEntryFlexPanelAp = new CardEntryFlexPanelAp();
cardEntryFlexPanelAp= getCustomDynamicEntryAp(cardEntryFlexPanelAp);
return cardEntryFlexPanelAp;
}
/**
* 方法描述 动态添加字段
* @param: [cardEntryFlexPanelAp]
* @return: kd.bos.metadata.form.cardentry.CardEntryFlexPanelAp
* @author: rd_feiyu_zhou
* @date: 2024/8/24
*/
public CardEntryFlexPanelAp getCustomDynamicEntryAp(CardEntryFlexPanelAp cardEntryFlexPanelAp) {
return cardEntryFlexPanelAp;
}
/**
* 方法描述 添加字段
* @param: [key, keyName]
* @return: kd.bos.metadata.form.cardentry.CardEntryFieldAp
* @author: rd_feiyu_zhou
* @date: 2024/7/12
*/
public CardEntryFieldAp addNewCardEntryField(String key, String keyName) {
CardEntryFieldAp cardEntryFieldAp = new CardEntryFieldAp();
cardEntryFieldAp.setId(key);
cardEntryFieldAp.setKey(key);
cardEntryFieldAp.setDisplayTitle(true);
cardEntryFieldAp.setVisible(null);
cardEntryFieldAp.setName(new LocaleString(keyName));
cardEntryFieldAp.setFireUpdEvt(true);//值更新事件
cardEntryFieldAp.setShowTitle(false);
TextField textField = new TextField();
textField.setId(key);
textField.setKey(key);
cardEntryFieldAp.setField(textField);
return cardEntryFieldAp;
}
/**
* 方法描述 设置字段样式
* @param: [fieldAp]
* @return: kd.bos.metadata.form.cardentry.CardEntryFieldAp
* @author: rd_feiyu_zhou
* @date: 2024/7/12
*/
public CardEntryFieldAp setEntryApStyle(CardEntryFieldAp fieldAp,String fontWeight,int fontSize,String ForeColor) {
fieldAp.setFontSize(fontSize); //字体大小
fieldAp.setForeColor(ForeColor);//颜色
fieldAp.setFontWeight(fontWeight);//字重
Style style = new Style();
Margin margin = new Margin();
style.setMargin(margin);
fieldAp.setStyle(style);
return fieldAp;
}
/**
* 此事件在系统要用到表单主实体模型时触发
* @param e
* @remark
* 插件修改原始主实体，注册自定义属性，返回新的主实体给系统
*/
@Override
public void getEntityType(GetEntityTypeEventArgs e) {
// 取原始的主实体
MainEntityType oldMainType = e.getOriginalEntityType();
// 复制主实体
MainEntityType newMainType = null;
try{
newMainType = (MainEntityType)oldMainType.clone();
}
catch (CloneNotSupportedException exp){
throw new KDException(exp, new ErrorCode("LoadCustomControlMetasSample", exp.getMessage()));
}
// 为自定义的文本字段，向主实体注册文本属性
this.registDynamicProps(newMainType);
// 回传主实体给系统
e.setNewEntityType(newMainType);
}
/**
* 方法描述 向主实体注册动态添加的属性
*/
private void registDynamicProps(MainEntityType newMainType) {
//把新字段注册到单据头
//向单据体动态注册一个新的文本属性
EntityType entityType =(EntityType) newMainType.getAllEntities().get("entryentity");
setCustomRegistDynamicProps(entityType);
}
/**
* 方法描述 向主实体注册子类动态添加的属性
* @param: [entityType]
* @return: void
* @author: rd_feiyu_zhou
* @date: 2024/8/24
*/
public void setCustomRegistDynamicProps(EntityType entityType) {
}
public TextProp setregisterSimpleProperty(String key, String title) {
TextProp textProp = new TextProp();
textProp.setName(key);//标识
textProp.setDisplayName(new LocaleString(title));//标题
textProp.setDbIgnore(true);//此字段不需要到物理表格取数
textProp.setAlias("");//物理字段名
return textProp;
}
@Override
public void entryRowClick(RowClickEvent evt) {
evt.getRow();
DynamicObject dataEntity = getView().getModel().getDataEntity(true);
changeSelectRowData(dataEntity,evt);
}
public void changeSelectRowData(DynamicObject dataEntity, RowClickEvent evt) {
}3、重写 search 事件，匹配模糊搜索内容。
private void changeMobileSearchText(MobileSearchTextChangeEvent mobileSearchTextChangeEvent, String listKey, String filedKey) {
String text = mobileSearchTextChangeEvent.getText();
if (!kd.bos.util.StringUtils.isEmpty(text)) {
this.getView().setVisible(true, listKey);
getView().getPageCache().put("searchText", text);
IFormView materialList = getView().getView(getView().getPageCache().get(listKey));
if (null != materialList) {
materialList.invokeOperation("refresh");
getView().sendFormAction(materialList);
}
} else {
this.getView().setVisible(false, listKey);
getView().getPageCache().put("searchText", null);
getView().getModel().setValue(filedKey, null);
}
}四、效果图
五、开发环境版本
不限
六、参考资料
赞 22人点赞
还没有人点赞，快来当第一个点赞的人吧！
打赏0人打赏
还没有人打赏，快来当第一个打赏的人吧！
