Search with suggestions

A rounded search field with a clear button and a panel of recent searches, live matches with icons and a "See all results" link.

Overview

A search field in the style of modern web apps: a rounded box with a search icon and a clear button, and a panel under it. Before people type, the panel offers recent searches; as they type, it lists up to five matches with an icon, a title and a detail line, plus a link to see all results.

Selecting a match fills in the field and closes the panel. The panel is part of the component, so it pushes the content below down instead of covering it. The matches use in, which ignores case; with a data source, Search() does the same and can be delegated in Dataverse.

When to use

Finding one record quickly by name in a large list.
Home screens and app headers where search is the main way in.

When not to use

Filtering a list that is already on screen: use a search bar with filter chips.
Choosing a value in a form: use a combo box.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernIcon	`1.1.1`
ModernTextInput	`1.1.2`
ModernButton	`1.0.0`
ModernText	`1.0.0`
Gallery	`2.15.0`

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml

- SearchSuggestionsRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =SearchSuggestionsBox.Height + If(SearchSuggestionsPanel.Visible, SearchSuggestionsPanel.Height + 6, 0) + 32
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =6
      PaddingBottom: =16
      PaddingLeft: =16
      PaddingRight: =16
      PaddingTop: =16
      Width: =Min(600, Parent.Width)
    Children:
      - SearchSuggestionsBox:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =ColorFade(App.Theme.Colors.Darker70, 82%)
            BorderThickness: =1
            DropShadow: =DropShadow.Light
            Fill: =Color.White
            FillPortions: =0
            Height: =48
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =4
            LayoutMinHeight: =48
            LayoutMinWidth: =120
            PaddingLeft: =14
            PaddingRight: =6
            RadiusBottomLeft: =24
            RadiusBottomRight: =24
            RadiusTopLeft: =24
            RadiusTopRight: =24
          Children:
            - SearchSuggestionsIcon:
                Control: ModernIcon@1.1.1
                Properties:
                  AccessibleLabel: ="Search"
                  Height: =20
                  Icon: ="Search"
                  IconColor: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  LayoutMinHeight: =20
                  LayoutMinWidth: =20
                  Width: =20
            - SearchSuggestionsInput:
                Control: ModernTextInput@1.1.2
                Properties:
                  AccessibleLabel: ="Search inspections"
                  Appearance: =Appearance.FilledLighter
                  Default: =locSearchSuggestionsQuery
                  FillPortions: =1
                  Height: =40
                  LayoutMinHeight: =40
                  LayoutMinWidth: =120
                  Placeholder: ="Search inspections, sites or people"
                  Size: =14
            - SearchSuggestionsClear:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: ="Clear search"
                  Appearance: =ButtonAppearance.Subtle
                  Height: =36
                  Icon: ="Dismiss"
                  Layout: =ButtonLayout.IconOnly
                  LayoutMinHeight: =36
                  LayoutMinWidth: =36
                  OnSelect: |
                    =UpdateContext({locSearchSuggestionsQuery: "", locSearchSuggestionsPicked: ""});
                    Reset(SearchSuggestionsInput)
                  Size: =14
                  Tooltip: ="Clear"
                  Visible: =Len(SearchSuggestionsInput.Text) > 0
                  Width: =36
      - SearchSuggestionsPanel:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
            BorderThickness: =1
            DropShadow: =DropShadow.Semilight
            Fill: =Color.White
            FillPortions: =0
            Height: |
              =SearchSuggestionsHeading.Height + If(SearchSuggestionsRecent.Visible, SearchSuggestionsRecent.Height, 0) + If(SearchSuggestionsMatches.Visible, SearchSuggestionsMatches.Height, 0) + If(SearchSuggestionsNoMatch.Visible, SearchSuggestionsNoMatch.Height, 0) + If(SearchSuggestionsAll.Visible, SearchSuggestionsAll.Height + 2, 0) + 2 + 16
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =2
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            PaddingBottom: =8
            PaddingLeft: =8
            PaddingRight: =8
            PaddingTop: =8
            RadiusBottomLeft: =14
            RadiusBottomRight: =14
            RadiusTopLeft: =14
            RadiusTopRight: =14
            Visible: =SearchSuggestionsInput.Text <> Coalesce(locSearchSuggestionsPicked, "") || IsBlank(SearchSuggestionsInput.Text)
          Children:
            - SearchSuggestionsHeading:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =28
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingBottom: =0
                  PaddingLeft: =8
                  PaddingTop: =0
                  Size: =12
                  Text: |
                    =If(
                        IsBlank(SearchSuggestionsInput.Text), "Recent searches",
                        SearchSuggestionsMatches.AllItemsCount & If(SearchSuggestionsMatches.AllItemsCount = 1, " match", " matches")
                    )
                  Wrap: =false
            - SearchSuggestionsRecent:
                Control: Gallery@2.15.0
                Variant: Vertical
                Properties:
                  AccessibleLabel: ="Recent searches"
                  AlignInContainer: =AlignInContainer.Stretch
                  BorderThickness: =0
                  FillPortions: =0
                  Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
                  Items: =["Warehouse Ghent", "forklift", "overdue"]
                  LayoutMinHeight: =0
                  LayoutMinWidth: =120
                  ShowScrollbar: =false
                  TabIndex: =0
                  TemplatePadding: =0
                  TemplateSize: =36
                  Visible: =IsBlank(SearchSuggestionsInput.Text)
                Children:
                  - SearchSuggestionsRecentItem:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: ="Search for " & ThisItem.Value
                        Align: =Align.Left
                        Appearance: =ButtonAppearance.Subtle
                        Height: =34
                        Icon: ="History"
                        OnSelect: |
                          =UpdateContext({locSearchSuggestionsQuery: ThisItem.Value, locSearchSuggestionsPicked: ""})
                        Size: =14
                        Text: =ThisItem.Value
                        Width: =Parent.TemplateWidth
                        X: =0
                        Y: =1
            - SearchSuggestionsMatches:
                Control: Gallery@2.15.0
                Variant: Vertical
                Properties:
                  AccessibleLabel: ="Matches"
                  AlignInContainer: =AlignInContainer.Stretch
                  BorderThickness: =0
                  FillPortions: =0
                  Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
                  Items: |
                    =FirstN(
                        Filter(
                            Table(
                                {Title: "Fire safety audit", Detail: "Warehouse Ghent · 15 Oct"},
                                {Title: "Fire door check", Detail: "Office Leuven · 21 Oct"},
                                {Title: "Forklift inspection", Detail: "Depot Antwerp · 19 Oct"},
                                {Title: "Ladder certification", Detail: "Office Leuven · 9 Oct"},
                                {Title: "Fire extinguisher service", Detail: "Depot Antwerp · 3 Nov"},
                                {Title: "Emergency lighting test", Detail: "Warehouse Ghent · 22 Oct"}
                            ),
                            SearchSuggestionsInput.Text in Title || SearchSuggestionsInput.Text in Detail
                        ),
                        5
                    )
                  LayoutMinHeight: =0
                  LayoutMinWidth: =120
                  ShowScrollbar: =false
                  TabIndex: =0
                  TemplatePadding: =0
                  TemplateSize: =52
                  Visible: =Not(IsBlank(SearchSuggestionsInput.Text)) && Self.AllItemsCount > 0
                Children:
                  - SearchSuggestionsMatchIcon:
                      Control: ModernIcon@1.1.1
                      Properties:
                        AccessibleLabel: ="Inspection"
                        Fill: =App.Theme.Colors.Lighter80
                        Height: =32
                        Icon: ="DocumentText"
                        IconColor: =App.Theme.Colors.Primary
                        PaddingBottom: =7
                        PaddingLeft: =7
                        PaddingRight: =7
                        PaddingTop: =7
                        RadiusBottomLeft: =8
                        RadiusBottomRight: =8
                        RadiusTopLeft: =8
                        RadiusTopRight: =8
                        Width: =32
                        X: =8
                        Y: =10
                  - SearchSuggestionsMatchTitle:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        FontWeight: =FontWeight.Semibold
                        Height: =20
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =14
                        Text: =ThisItem.Title
                        Width: =Parent.TemplateWidth - 56
                        Wrap: =false
                        X: =48
                        Y: =7
                  - SearchSuggestionsMatchDetail:
                      Control: ModernText@1.0.0
                      Properties:
                        AccessibleLabel: =Self.Text
                        Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                        Height: =20
                        PaddingBottom: =0
                        PaddingTop: =0
                        Size: =12
                        Text: =ThisItem.Detail
                        Width: =Parent.TemplateWidth - 56
                        Wrap: =false
                        X: =48
                        Y: =27
                  - SearchSuggestionsMatchSelect:
                      Control: ModernButton@1.0.0
                      Properties:
                        AccessibleLabel: =ThisItem.Title & ", " & ThisItem.Detail
                        Appearance: =ButtonAppearance.Transparent
                        Height: =Parent.TemplateHeight
                        OnSelect: |
                          =UpdateContext({locSearchSuggestionsQuery: ThisItem.Title, locSearchSuggestionsPicked: ThisItem.Title});
                          Notify("Open " & ThisItem.Title & " (example only).", NotificationType.Information)
                        Text: =""
                        Width: =Parent.TemplateWidth
                        X: =0
                        Y: =0
            - SearchSuggestionsNoMatch:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =ColorFade(App.Theme.Colors.Darker70, 30%)
                  Height: =40
                  LayoutMinHeight: =0
                  LayoutMinWidth: =80
                  PaddingLeft: =8
                  Size: =14
                  Text: ="Nothing matches """ & SearchSuggestionsInput.Text & """"
                  Visible: =Not(IsBlank(SearchSuggestionsInput.Text)) && SearchSuggestionsMatches.AllItemsCount = 0
                  Wrap: =false
            - SearchSuggestionsAll:
                Control: ModernButton@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Left
                  AlignInContainer: =AlignInContainer.Stretch
                  Appearance: =ButtonAppearance.Subtle
                  Color: =App.Theme.Colors.Primary
                  Height: =36
                  Icon: ="Search"
                  LayoutMinHeight: =36
                  LayoutMinWidth: =80
                  OnSelect: |
                    =UpdateContext({locSearchSuggestionsPicked: SearchSuggestionsInput.Text});
                    Notify("Search all for " & SearchSuggestionsInput.Text & " (example only).", NotificationType.Information)
                  Size: =14
                  Text: ="See all results for """ & SearchSuggestionsInput.Text & """"
                  Visible: =Not(IsBlank(SearchSuggestionsInput.Text))

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

`Items` on `SearchSuggestionsMatches`

The matches for what people typed, each with a Title and a Detail line. Keep FirstN so the panel stays short.

In the YAML

YAML

Items: |
  =FirstN(
      Filter(
          Table(
              {Title: "Fire safety audit", Detail: "Warehouse Ghent · 15 Oct"},
              {Title: "Fire door check", Detail: "Office Leuven · 21 Oct"},
              {Title: "Forklift inspection", Detail: "Depot Antwerp · 19 Oct"},
              {Title: "Ladder certification", Detail: "Office Leuven · 9 Oct"},
              {Title: "Fire extinguisher service", Detail: "Depot Antwerp · 3 Nov"},
              {Title: "Emergency lighting test", Detail: "Warehouse Ghent · 22 Oct"}
          ),
          SearchSuggestionsInput.Text in Title || SearchSuggestionsInput.Text in Detail
      ),
      5
  )

Your version

YAML

Items: |
  =FirstN(
      ForAll(
          Search(Inspections, SearchSuggestionsInput.Text, Title, Site) As r,
          {Title: r.Title, Detail: r.Site & " · " & Text(r.'Due date', "d mmm")}
      ),
      5
  )

`OnSelect` on `SearchSuggestionsMatchSelect`

Open the selected match. Keep the UpdateContext, which puts the title in the field and closes the panel.

In the YAML

YAML

OnSelect: |
  =UpdateContext({locSearchSuggestionsQuery: ThisItem.Title, locSearchSuggestionsPicked: ThisItem.Title});
  Notify("Open " & ThisItem.Title & " (example only).", NotificationType.Information)

Your version

YAML

OnSelect: |
  =UpdateContext({locSearchSuggestionsQuery: ThisItem.Title, locSearchSuggestionsPicked: ThisItem.Title});
  Set(varInspection, LookUp(Inspections, Title = ThisItem.Title));
  Navigate(InspectionScreen, ScreenTransition.None)

`Items` on `SearchSuggestionsRecent`

The searches to offer before people type.

In the YAML

YAML

Items: =["Warehouse Ghent", "forklift", "overdue"]

Your version

YAML

Items: |
  =ForAll(FirstN(Sort(RecentSearches, Created, SortOrder.Descending), 3) As r, {Value: r.Query})

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, SearchSuggestionsRoot, with all its controls inside.
Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Search with suggestions

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on SearchSuggestionsMatches

OnSelect on SearchSuggestionsMatchSelect

Items on SearchSuggestionsRecent

How to paste

When Studio flags a control version

`Items` on `SearchSuggestionsMatches`

`OnSelect` on `SearchSuggestionsMatchSelect`

`Items` on `SearchSuggestionsRecent`