在AstroZero标准页面中，如何实现下拉框选项值的筛选功能？

问题描述

如何实现下拉框选项值中，根据某输入框中值，筛选显示，而不是显示全部选项值。

例如，某商品分为上架、下架和测试三个阶段。当前商品导航条页面下拉框A中，展示的选项是所有状态的商品，会出现很多脏数据，导致用户难以正确选取。此时，可以通过添加一个输入框B，实现下拉框A的选项值根据输入框B输入的值进行筛选。例如，输入框B中输入Online，下拉框A中只显示所有上架状态的商品，如图1。

图1 实现效果

解决方法

这里可以通过设置标准页面的输入框和下拉框，来实现自定义下拉框选项取值。

向标准页面工作区域拖入一个“输入框”组件，在输入框属性设置中，单击，进行数据绑定。

图2 拖入输入框
单击“新增模型”，设置模型名称为“Key”，选择“自定义”，单击“下一步”。

图3 配置自定义模型
单击“新增节点”，新增“value”字段，字段类型为Text，单击“下一步”。

图4 新增节点
本示例无需添加方法，直接单击“确定”。
在选择模型中，选中创建的数据模型“value”字段，单击“确定”。

图5 选中字段
选中输入框组件，在“事件”页签，单击“失去焦点”后的。

图6 设置事件

在代码编辑区域，编辑事件代码，单击“创建”。

图7 自定义JS代码

系统中已存在商品对象“命名空间__Product__CST”，并有“name”和“命名空间__status__CST”两个字段，分别是商品名和商品状态，且已有对象数据。该事件代码实现的是将输入框中输入值value等同于商品状态的商品名取出来，返回到“list”列表中。

// 当前组件 
// let _component = context.$component.current 

// 获取名字为${modelName}的数据模型 
// let _model = context.$model.get('${modelName}') 
// debugger 
context.object("命名空间__Product__CST").query({condition:{ 
    conjunction: "AND", 
    conditions: [ 
        { field: "命名空间__status__CST", operator: "eq", value: context.$model.get("Key").getData().value } 
    ] 
}}).then(function (resp) { 
    context.$model.get("list").setData(resp.map(function (o) { 
        return { 
            display: o.name, 
            value: o.id 
        } 
    })); 
});

单击页面上方的，保存页面。
向标准页面工作区域拖入一个“下拉框”组件，在“属性”页签中，单击属性值绑定后的“+”，再单击。

图8 拖入选择框
参考2~6，创建自定义“list”数据模型，该模型中新增“display”和“name”两个字段，选中“list”，单击“确定”。

图9 新增list模型
单击页面上方的，保存页面。
页面保存成功后，单击，预览页面。

页面预览效果，如图10所示。在输入框中输入“Online”，下拉框中只显示处于“Online”状态的商品选项。

图10 页面效果