CODEWITHSUNDEEP
sapui5
Manoj Kumar
Manoj Kumar

Reputation: 13

How to add a Autofill filter in FilterBar

I'm trying to implement filters using SAPUI5 FilterBar. I want to add a field which works like a dropdown filter only when you type something in it. When you put the cursor, it should not show any results, but as you start typing something, the matching results should show up in the dropdown.

Upvotes: 0

Views: 834

Answers (1)

Enum
Enum

Reputation: 184

Here is a working example: Plunker

You could use a Input object in the filterGroupItems aggregation of the FilterBar control.

Note: The filterItems aggregation is deprecated as of version 1.48

<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>

Which produces:

gif

Be sure to add the visibleInFilterBar="true" attribute if you want your input field to be visible without having to add it in the Filters prompt.

If you want to add the Input items dynamically, add an aggregation binding to the <items>.
To do that, change the Input control as follows:

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

And set the model according to your datasource (here it's a JSONModel) in the controller:

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

Upvotes: 1

Related Questions