Sort list items according to user input in Qt / QML

Question

I am trying to sort the list of elements in a QML view according to the input provided by the user. I wrote sorting logic, but could not set the sorted model. It seems that the sorted model is not assigned to the actual model used for the original ListView. Please take a look at the code and let me know if I am doing something wrong.

//main.qml

import QtQuick 1.1 Rectangle { id: page width: 500; height: 400 color: "#edecec" ModifiedForSorting { id: search; focus: true } } 

//ModifiedForSorting.qml

 import QtQuick 1.1 FocusScope { id: focusScope width: 250; height: 28 Text { id: typeSomething anchors.fill: parent; anchors.leftMargin: 8 verticalAlignment: Text.AlignVCenter text: "Type here..." color: "gray" font.italic: true } MouseArea { anchors.fill: parent onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); } } TextInput { id: textInput anchors { left: parent.left; leftMargin: 8;rightMargin: 8; verticalCenter: parent.verticalCenter } focus: true selectByMouse: true onTextChanged: { //update list as per input from user container.getSortedItems(textInput.text); color = "red" } } states: State { name: "hasText"; when: textInput.text != '' PropertyChanges { target: typeSomething; opacity: 0 } } transitions: [ Transition { from: ""; to: "hasText" NumberAnimation { exclude: typeSomething; properties: "opacity" } }, Transition { from: "hasText"; to: "" NumberAnimation { properties: "opacity" } } ] Rectangle { id: container width: 500; height: 400 color: "#343434" anchors.top: textInput.bottom ListModel { id: namesModel ListElement { title: "Mumbai" } ListElement { title: "Pune" } ListElement { title: "Bangalore" } ListElement { title: "Kolkata" } ListElement { title: "Hyderabad" } ListElement { title: "Nagpur" } ListElement { title: "Thane" } } // The delegate for each item in the model: Component { id: listDelegate Item { id: delegateItem width: listView.width; height: 55 clip: true Row { anchors.verticalCenter: parent.verticalCenter spacing: 10 Column { anchors.verticalCenter: parent.verticalCenter Text { text: title font.pixelSize: 15 color: "white" } } } } } function showAll() { var filteredItems = ""; for (var i = 0; i < namesModel.count; i++) { filteredItems = filteredItems + namesModel.get(i).title; } listView.model = filteredItems; //namesModel = filteredItems; } function getSortedItems(searchTerm) { var filteredItems = ""; if (searchTerm === "") { showAll(); return; } for (var i = 0; i < namesModel.count; i++) { if (namesModel.get(i).title.indexOf(searchTerm) === 0) { filteredItems = filteredItems + namesModel.get(i).title; } } listView.model = filteredItems; //namesModel = filteredItems; } // The ListView: ListView { id: listView anchors.fill: parent; anchors.margins: 20 model: namesModel delegate: listDelegate } } } 

As shown above, I assume that the sorted model is not reassigned to the ListView. I'm not sure. Please help me. Thanks.

Answer 1

Looking at your code, I think you mean filtering , not sorting .

In your functions, you are trying to assign the string value filteredItems to the listView.model property. You will probably get a clear error for this in the application log.

To solve this error, you can use the helper ListModel and populate it with only those elements that match your filter. Try replacing all of your code below listDelegate Component with:

  ListModel{ id: filteredModel } function getSortedItems(searchTerm) { // Clear the aux model filteredModel.clear(); // Add fitting items to the aux model for (var i = 0; i < namesModel.count; i++) { if (searchTerm === "" || namesModel.get(i).title.indexOf(searchTerm) === 0) { filteredModel.append(namesModel.get(i)); } } } // The ListView: ListView { id: listView anchors.fill: parent; anchors.margins: 20 model: filteredModel delegate: listDelegate }