how to implement search function in Qt Quick folderListmodel ?? - qt

Question

I want implement search functioning to my music player totally written in Qml
. In my case i initiated a qml Filedialog to get folder from filesystem and then i used folderListModel to list them through ListView .
I want search through the list any clue how can i achieve this ????
Please don't suggest to use c++ . and also not suggest me to use nameFilters :["*."] in foldelistmodel cause it wont work it only filter according to extension of file not the file name

Answer 1

Actually nameFilters does allow to filter by filename. Using a kind of hack, it is even possible to make it case insensitive.
Here is an ugly but working example:
import QtQuick 2.3
import QtQuick.Controls 1.2
import Qt.labs.folderlistmodel 2.1
Item {
width: 300
height: 300
FolderListModel
{
id: folderListModel
}
function updateFilter()
{
var text = filterField.text
var filter = "*"
for(var i = 0; i<text.length; i++)
if(!caseSensitiveCheckbox.checked)
filter+= "[%1%2]".arg(text[i].toUpperCase()).arg(text[i].toLowerCase())
else
filter+= text[i]
filter+="*"
print(filter)
folderListModel.nameFilters = [filter]
}
Row
{
spacing: 5
Text {text:"Filter"}
TextField
{
id: filterField
onTextChanged: updateFilter()
}
Text {text:"Case Sensitive"}
CheckBox
{
id: caseSensitiveCheckbox
checked: false
onCheckedChanged:updateFilter()
}
}
ListView
{
anchors.fill: parent
anchors.topMargin: 30
model:folderListModel
delegate: Text{text: model.fileName}
}
}

Answer 2

Use DelegateModel :
with DelegateModelGroup to sort and filter delegate items.
Assume that you have a function to filter files using filename,
function willBeShownOnView(filename){ /* ... */ }
You can extend this function by passing more roles (fileSize, fileIsDir, ...) or filter string entered by user if you need, and implement the filtering logic within this function.
Next, create a DelegateModel with a filterGroup:
DelegateModel {
id: delegateModel
model: FolderListModel{id: folderModel}
groups: [
DelegateModelGroup {
name: "filterGroup"; includeByDefault: true
}
]
filterOnGroup: "filterGroup"
delegate: MyFileDisplayComponent{/* ... */}
function applyFilter(){ /* see below */}
}
As includeByDefault: true, all items in folderModel are included in the filterGroup. And when we applyFilter, some items should be removed from this group. For example,
function applyFilter(){
var numberOfFiles = folderModel.count;
for (var i = 0; i < numberOfFiles; i++){
var fileName = folderModel.get(i, "fileName");
if (willBeShownOnView(fileName)){items.addGroups(i, 1, "filterGroup");}
else {items.removeGroups(i, 1, "filterGroup");}
}
}
After applyFilter is called, only files that passes willBeShownOnView is added to the filterGroup. And the property filterOnGroup: "filterGroup" says the delegate model contains only items within the filterGroup. Therefore, we can use a simple ListView to display the result:
ListView {
model: delegateModel
//...
}