如何在FilterBar中添加自动填充过滤器

Question

我正在尝试使用SAPUI5 FilterBar实施过滤器。我想添加一个仅当您在其中键入内容时才像下拉过滤器一样工作的字段。当您放置光标时，它不应显示任何结果，但是当您开始输入内容时，匹配的结果应显示在下拉菜单中。

Answer 1

这是一个有效的示例：Plunker

您可以在Input控件的 filterGroupItems 聚合中使用 FilterBar 对象。

  

注意：自版本 1.48

起，不推荐使用filterItems聚合

<fb:FilterBar id="filterBar">
    <fb:filterGroupItems>
        <fb:FilterGroupItem 
            groupName="GroupExample" 
            name="regionGroup" 
            label="Example" 
            visibleInFilterBar="true">
            <fb:control>
                    <Input showSuggestion="true">
                        <suggestionItems>
                            <core:Item key="001" text="Russia"/>
                            <core:Item key="002" text="America"/>
                            <core:Item key="003" text="Australia"/>
                            <core:Item key="004" text="Germany"/>
                        </suggestionItems>
                    </Input>
            </fb:control>
        </fb:FilterGroupItem>
    </fb:filterGroupItems>
</fb:FilterBar>

哪个会产生：

如果希望输入字段可见而不必在过滤器提示符下添加它，请确保添加visibleInFilterBar="true"属性。

---

如果要动态添加Input项，请向<items>添加聚合绑定。
为此，请按如下所示更改Input控件：

<Input suggestionItems="{path: '/dropdownData'}" showSuggestion="true">
    <suggestionItems>
        <core:Item key="{key}" text="{text}"/>
    </suggestionItems>
</Input>

并根据控制器中的数据源（此处为JSONModel）设置模型：

onInit: function() {
    this.oModel = new JSONModel("/data.json");
    var oView = this.getView();
    oView.setModel(this.oModel);
}