Discussion Board

Results 1 to 10 of 10
  1. #1
    Registered User
    Join Date
    Dec 2011
    Posts
    15

    Add search bar to QML Listview like Nokia N9 contacts?

    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.

  2. #2
    Registered User
    Join Date
    Dec 2011
    Posts
    15

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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.

  3. #3
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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!

  4. #4
    Super Contributor
    Join Date
    Mar 2009
    Posts
    1,024

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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();
    }
    Last edited by gnuton; 2012-01-23 at 17:43.

  5. #5
    Registered User
    Join Date
    Dec 2011
    Posts
    15

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    cheers pal, very very much appreciated.

  6. #6
    Registered User
    Join Date
    Jan 2012
    Posts
    10

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    Awesome, thanks @gnuton! Really useful.

  7. #7
    Registered User
    Join Date
    Dec 2011
    Posts
    15

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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.

  8. #8
    Registered User
    Join Date
    Sep 2011
    Posts
    449

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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?

  9. #9
    Registered User
    Join Date
    Dec 2011
    Posts
    15

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    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.

  10. #10
    Super Contributor
    Join Date
    Mar 2009
    Posts
    1,024

    Re: Add search bar to QML Listview like Nokia N9 contacts?

    Quote Originally Posted by rashm2k View Post
    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.

Similar Threads

  1. E52 search contacts problem
    By nl2ttl in forum General Development Questions
    Replies: 1
    Last Post: 2010-02-11, 22:28
  2. search contacts with the name
    By girija_epigon in forum Symbian
    Replies: 7
    Last Post: 2009-07-21, 07:35
  3. Replies: 0
    Last Post: 2009-07-08, 13:35
  4. Search in contacts (sample code)
    By pythonkid in forum Symbian
    Replies: 7
    Last Post: 2008-10-27, 12:20
  5. Deep contacts search
    By marciano in forum Tools and SDK Feedback (Closed)
    Replies: 2
    Last Post: 2006-11-27, 21:04

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×