Add search bar to QML Listview like Nokia N9 contacts?

[rashm2k]

I've added a search bar to my QML app - which does work fine. However what I want is for the user to pull down the list view and then the searchbar is shown. By default the search bar is hidden.

EXACTLY like the Nokia N9 recent calls/contacts - and which the same magnifying glass icon as well.

Thanks in advance.

[rashm2k]

doesn't seem like there is any one around here?

Anyway I've solved it - I add a rectangle at the top of my QML List view, and add the search box into it, hidden to begin with. Then add a onMovementended slot to check the verticalvelocity and if moving down then animate the showing of the search bar.

hope that helps someone.

[maxart]

Yes. Doesn't seem like there's much people around answering dev questions (mine got ignored as well - http://www.developer.nokia.com/Commu...r-filter-icon& , and, like you, I ended up solving it myself).

Any chance you could share some code snippet, or even better, create a small sample project on Github to show how you did it?

Thanks!

[gnuton]

Hi maxart
I wrote this snippet to show you how to add a search bar to a listview.

Component {
id: searchHeader

Item {
id: searchRectangle

// Size
width: parent.width
height: (state == "visible") ? 70 : 0

TextField {
id: searchField
anchors.fill: parent
anchors.margins: 5
focus: false
onActiveFocusChanged: (searchField.activeFocus) ? autoHideTimer.stop() : autoHideTimer.restart()

placeholderText: "Search"
ToolIcon {
id: searchIcon
iconId: "toolbar-search";
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
}
}

// Make searchRectangle available to other items
Component.onCompleted: list.headerItem = searchRectangle
Component.onDestruction: list.headerItem = null

// Define initial status. States = [hidden, visible]
// At beginning header must to be visible to show cursor
// when input item receives the focus
state: "visible"
onStateChanged: console.log("STATE" + searchField.state)

// Autohide timer
Timer {
id: autoHideTimer
interval: 2000
onTriggered: searchRectangle.state = "hidden"
running: true
}

function startTimer(){
// Doesn't hide search field if it has focus
if (!searchField.activeFocus)
autoHideTimer.restart();
}
}

}

ListView {
anchors.fill: parent

id: list
model: 100
header: searchHeader
property Item headerItem: null

delegate: Rectangle {
width: list.width
height: 50
Text {
text: index
}
}

onMovementStarted: headerItem.state = "visible";
onMovementEnded: headerItem.startTimer();
}

[rashm2k]

cheers pal, very very much appreciated.

[maxart]

Awesome, thanks @gnuton! Really useful.

[rashm2k]

I tried this but there are some issues with it.

As soon as the soft keyboard comes up, the listview moves up and the searchbox gets hidden, then the keyboard disappears ofcourse because there is nothing to focus.

So I can never type anything into the search box!

Please help me to fix this.

[kusumk]

Hi,

I tried the same piece of code on N950 and did not face any issue. The searchbox is present and i am able to enter text.
I have put the code in a Rectangle and checked it. Alternatively, tried keeping it in PageStack too, i didnt face any issue,

can you paste your piece of code to test, if you have made any changes?

[rashm2k]

I'll PM you the code later.

However its still not the same as the contacts searchbar.

When you pull the contacts down it does not appear UNTIL you pull down far enough that there is enough space for it to appear.
There are also bouncing effects when it is shown and hidden.

I really like the search bar and its such a shame I can't get the info from somewhere.

[gnuton]

I tried this but there are some issues with it.

As soon as the soft keyboard comes up, the listview moves up and the searchbox gets hidden, then the keyboard disappears ofcourse because there is nothing to focus.

So I can never type anything into the search box!

Please help me to fix this.

Well, if all elements scroll up... do not put them in a flickable-based element.