Sharing information related to Qt, Maemo development and some other information

Wednesday, April 17, 2013

Creating QML ListView with Search support

In last post I posted initial implementation for my Audiobook Reader app for Ubuntu-Touch, I was able to add some more features to it then after. I added support for Adding and removing custom bookmark and play the custom bookmark.
I also added support for searching the books by title in book list view. Similar to email application in Nokia N9. In this post I will show how similar feature can be implemented in QML application.
In my implementation if you pull down the book list, then it will show the search box. You can type in that search box and it will try to show books that matches that typed text. If you don't type for some time, search box will gets disappear.
Here is demo,
Following is my code. First I created TextField where user can type search text. If user type some text then I am applying the filter to my list's data model using typed text and also resetting the timer, which is responsible in hiding the search field.

Following is my list view, Here I am setting its y property based on visibility of search field. Data model implements method for showing filtered data or all the data. Other important function is onContentYChanged, this function makes search field visible if user pull down the book list view.

am doing a audio player for ubuntu desktop and want put searchbox over playlist but am not using listmodel am using foldermodel to get list of Audio files help me implimenting it . i tried to do it but i dont know whats wrong happening with it my project is herre http://launchpad.net/kmusicplay thanks

Hi, I checked your code, I did not seen code for search box or filtering. But I have following suggestion. You can use code similar to this post, in applyFilter function of Model, you will need to manipulate the filter applied to FolderListModel (nameFilters: [ "*.mp3" ]), here in case of search, you need to make filter to show file and folder names matching to searched text.