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.

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.