API Documentation
Documentation for developing SailfishOS applicationsSearchField QML Type
A text field for entering a text search query More...
| Import Statement: | import Sailfish.Silica 1.0 |
| Inherits: |
Properties
- active : bool
- canHide : bool
- transitionDuration : int
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: {
listModel.update()
}
}
// 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() {
clear()
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
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.
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.
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.