在华为云Astro轻应用标准页面中，如何实现下拉框选项值的筛选功能？

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

图1 实现效果

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

2. 单击“新增模型”，设置模型名称为“Key”，选择“自定义”，单击“下一步”。
   图3 配置自定义模型
   

3. 单击“新增节点”，新增“value”字段，字段类型为Text，单击“下一步”。
   图4 新增节点
   

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

6. 选中输入框组件，在“事件”页签，单击“失去焦点”后的。
   图6 设置事件
   

7. 在代码编辑区域，编辑事件代码，单击“创建”。
   图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. 单击页面上方的，保存页面。
9. 向标准页面工作区域拖入一个“下拉框”组件，在“属性”页签中，单击属性值绑定后的“+”，再单击。
   图8 拖入选择框
   

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

11. 单击页面上方的，保存页面。
12. 页面保存成功后，单击，预览页面。