如何在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);
}