• Home

SearchBar

A search bar with native styling for iOS and Android based on the Theme settings. More...

• List of all members, including inherited members

Properties

• barBackgroundColor : color
• icon : string
• iconColor : color
• iconLeftPadding : real
• iconSpacing : real
• inputBackgroundColor : color
• iosAlternateStyle : bool
• keepVisible : bool
• placeHolderColor : alias
• placeHolderText : string
• pullEnabled : bool
• showClearButton : bool
• showDivider : bool
• target : ListView
• text : alias
• textColor : alias
• textField : alias

Signals

• accepted(string)
• editingFinished(string)

Methods

• hide()
• show()

Detailed Description

The SearchBar control provides a native-looking search input field for Android and iOS based on the Theme settings.

Note: The item offers two different styles for the search bar on iOS. To switch to the second style, which is used in the image above, set iosAlternateStyle to true.

Example Usage

Simple Example

 import Felgo 3.0

 App {
   NavigationStack {

     Page {
       title: "SearchBar Example"

       SearchBar {
         id: searchBar
         onAccepted: {
           console.log("search accepted: "+text)
           listView.model = 2 // update result
         }
       }

       AppListView {
         id: listView
         anchors.top: searchBar.bottom
         model: 50
         delegate: SimpleRow { text: "Entry "+index }
       }

     } // Page

   }
 }

Pull-To-Search Example

The SearchBar can also be combined with a ListView to hide the bar by default and only show it after pulling down the list. To use this feature, activate pullEnabled and specify the target ListView.

 import Felgo 3.0

 App {
   NavigationStack {

     Page {
       title: "SearchBar Example"

       SearchBar {
         id: searchBar
         target: listView
         pullEnabled: true
         onAccepted: {
           console.log("search accepted: "+text)

           // if the search bar is not empty, we prevent it from disappearing
           if(text !== "") {
             searchBar.keepVisible = true
             listView.model = 2 // update result
           }
           else {
             // initial settings
             searchBar.keepVisible = false
             listView.model = 50
           }
         }
       }

       AppListView {
         id: listView
         height: parent.height - y // the search bar modifies the y-position of the list
         model: 50
         delegate: SimpleRow { text: "Entry "+index }
       }

     } // Page

   }
 }

Note: The pullEnabled setting modifies the y-position of the ListView, so we decrease its height in the example to always exactly fill the page.

Property Documentation

Signal Documentation

Method Documentation