How to implement a search/filter feature with listmodel and listview?

divaindie

Hi all,
in my application i have a search tab which takes text input.and i have listview with listmodel .if entered text is found in list model , i have to highlight that particular word with yellow color . how i can do this ?

FYI : it is QML application.i want to implement this with listmodel .

Yashpal

@divaindie Hi! you can take a look at SortFilterProxyModel for search/filter feature. And, for highlighting you can do a string comparison among delegate text and search text.

divaindie

thank you !! but i want to implement this with QML model.
iam avoiding cpp model for some reason(mainly because of animation in qml side is not triggered properly ).is it possible to achieve this with any QML model ?

Yunus

@divaindie Hi. There was some one who are dealing with this issue yesterday. Maybe that solution can also help you here is the code just copy and try.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
visible: true
width: 640
height: 480

Rectangle {
    id:comboBox
    property variant items: ["First", "Second","Third"]

    signal comboClicked;
    anchors.centerIn: parent
    width: 141
    height: 30




    Rectangle
    {
        id:chosenItem
        radius:10;
        width:100;
        height:30;
        color: "#454b4d"




        Text {
            id:chosenItemText
            anchors.centerIn: parent
            color: "black"
            text:"Choose";
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 12
            font.family: "Arial"
            font.pointSize: 14;
            smooth:true
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
            }
        }
    }

    Rectangle
    {
        id:dropDown
        width:100;
        height:0;
        clip:true;
        border.color: "black"
        anchors.bottom:  chosenItem.top;
        anchors.margins: 2;

        ListView {
            id:listView
            height:1000;
            model: comboBox.items
            currentIndex: 0


            delegate: Item{
                width:comboBox.width;
                height: comboBox.height;
            Rectangle{id:highlighter; anchors.fill: parent; color: "blue"; visible: listView.currentIndex===index}



                Text {
                    text: modelData
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.margins: 5;
                    color: "black"
                    elide: modelData.elideMode

                }
                MouseArea {
                    anchors.fill: parent;
                    hoverEnabled: true
                    onClicked: {

                        comboBox.state = ""
                        chosenItemText.text = modelData;
                        listView.currentIndex = index;
                    }
                }
            }
        }
    }


    states: State {
        name: "dropDown";
        PropertyChanges { target: dropDown; height:30*comboBox.items.length }
    }


}

}

ODБOï

@Yunus said in How to implement a search/filter feature with listmodel and listview?:

There was some one who are dealing with this issue yesterday

https://forum.qt.io/topic/99187/how-to-set-focus-for-the-items-on-mouse-movement-list-view

not exactly the same issue

GrecKo

@divaindie said in How to implement a search/filter feature with listmodel and listview?:

thank you !! but i want to implement this with QML model.
iam avoiding cpp model for some reason(mainly because of animation in qml side is not triggered properly ).is it possible to achieve this with any QML model ?

I don't see the link between a c++ model and animations, a ListModel is as much a c++ model as others.

You can use my lib https://github.com/oKcerG/SortFilterProxyModel for filtering and sorting models easily from QML.