Javascript – QML – Listview Filter

You can join the strings together prior to doing an indexOf, e.g.

filter: search ? model => (model.state + ", " + model.country).toLowerCase().indexOf(search) !== -1 : null

Here’s a full working example:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick3D
Page {
    id: page
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        Label { text: qsTr("Search") }

        Frame {
            Layout.fillWidth: true
            TextEdit {
                id: searchTextEdit
                width: parent.width
            }
        }

        Label { text: qsTr("States (count:%1)").arg(filterDelegateModel.count) }

        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            model: FilterDelegateModel {
                id: filterDelegateModel
                model: states
                filter: search ? model => (model.state + ", " + model.country).toLowerCase().indexOf(search) !== -1 : null
                property string search: searchTextEdit.text.toLowerCase() 
                onSearchChanged: Qt.callLater(update)
                delegate: Frame {
                    id: frame
                    property int visibleIndex: DelegateModel.visibleIndex
                    width: ListView.view.width
                    background: Rectangle {
                        color: visibleIndex & 1 ? "#e0e0e0" : "#d0d0d0"
                        border.color: "#c0c0c0"
                    }
                    RowLayout {
                        width: parent.width
                        Text {
                            text: (visibleIndex + 1)
                            color: "grey"
                        }
                        Text {
                            Layout.fillWidth: true
                            text: model.state + ", " + model.country
                        }
                    }
                }
            }
        }
    }

    ListModel {
        id: states
        ListElement { state:"Durban"; country: "RSA" }
        ListElement { state:"New York"; country: "USA" }
        ListElement { state:"Toronto"; country: "Canada" }
        ListElement { state:"Mbabane"; country: "Swaziland" }
        ListElement { state:"Harare"; country: "Zimbabwe" }
    }
}

// FilterDelegateModel.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15

DelegateModel {
    property var filter: null
    readonly property bool running: !filtered
    readonly property bool filtered: updateIndex >= allItems.count
    readonly property int progress: filtered ? 100 : Math.floor(100 * updateIndex / allItems.count)
    property int updateIndex: 0
    onFilterChanged: Qt.callLater(update)
    groups: [
        DelegateModelGroup {
            id: allItems
            name: "all"
            includeByDefault: true
            onCountChanged: {
                if (updateIndex > allItems.count) updateIndex = allItems.count;
                if (updateIndex < allItems.count) Qt.callLater(update, updateIndex);
            }
        },
        DelegateModelGroup {
            id: visibleItems
            name: "visible"
        }
    ]
    filterOnGroup: "visible"

    function update(startIndex) {
        startIndex = startIndex ?? 0;
        if (startIndex < 0) startIndex = 0;
        if (startIndex >= allItems.count) {
            updateIndex = allItems.count;
            return;
        }
        updateIndex = startIndex;
        if (updateIndex === 0) {
            allItems.setGroups(0, allItems.count, [ "all" ] );
        }
        for (let ts = Date.now(); updateIndex < allItems.count && Date.now() < ts + 50; updateIndex++) {
            let visible = !filter || filter(allItems.get(updateIndex).model);
            if (!visible) continue;
            allItems.setGroups(updateIndex, 1, [ "all", "visible" ]);
        }
        if (updateIndex < allItems.count) Qt.callLater(update, updateIndex);
    }

    Component.onCompleted: Qt.callLater(update)
}