API Documentation

Documentation for developing SailfishOS applications

SearchField QML Type

A text field for entering a text search query More...

Import Statement: import Sailfish.Silica 1.0



Detailed Description

The SearchField type displays a single line of editable plain text along with a search icon and a button that clears the entered text when clicked.

Below is a list with a search field header:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 SilicaListView {
     property alias searchField: headerItem

     anchors.fill: parent

     header: SearchField {
         width: parent.width
         placeholderText: "Search"

         onTextChanged: {

     // prevent newly added list delegates from stealing focus away from the search field
     currentIndex: -1

     model: ListModel {
         id: listModel
         property var continents: ["Africa", "Antarctica", "Asia", "Europe", "North America", "Oceania", "South America"]

         function update() {
             for (var i=0; i<continents.length; i++) {
                 if (searchField.text == "" || continents[i].indexOf(searchField.text) >= 0) {
                     append({"name": continents[i]})

         Component.onCompleted: update()

     delegate: ListItem {
         Label {
             anchors {
                 left: parent.left
                 leftMargin: searchField.textLeftMargin
                 verticalCenter: parent.verticalCenter
             text: name

SearchField inherits from TextField, so its text property can be used to access the entered text.

Note the textLeftMargin property refers to the position of the text within the search field. This can be modified to align the search text with the position of the text entries in a list as desired.

See also TextField.

Property Documentation

active : bool

True if the search field is active. Setting this to false will set opacity to 0 and visible to false, shrink the height to 0, and clear the search text.

Note this property is changed by the search field (and thus any binding is cleared) when the user clicks the "hide" button.

The default value is true.

canHide : bool

True if the search field should show a "hide" button when the search text is empty.

If this property is true, the search field's "clear" button (that normally clears the search text when clicked) will change to a "hide" icon when the search text is empty, and if the button is clicked in this state, active is set to false and the search field will be visually hidden.

transitionDuration : int

The duration of the animation (in milliseconds) that is run when the search field transitions between active and inactive states.

The default value is 200.

We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.