Автозаполнение текстового поиска QtQuick с помощью автозаполнения Google

Question

Я хочу создать похожий пользовательский интерфейс, используя QML, как показано на ссылке ниже, это был мой вопрос об использовании Qcompleter в pyqt5, pyqt5 autocomplete QLineEdit - Google размещает автозаполнение . Как мы можем реализовать ту же модель в Qt Quick, я не могу использовать модели в TextField QML, поскольку я получаю ошибку ниже

Answer 1

Используя предыдущую модель, необходимо только создать графический интерфейс, в этом случае используйте ListView + Popup, реализующий логику выбора:

main.py

import os
import sys
import json
from PyQt5 import QtCore, QtGui, QtNetwork, QtQml

API_KEY = "<API_KEY>"

class SuggestionPlaceModel(QtGui.QStandardItemModel):
    finished = QtCore.pyqtSignal()
    error = QtCore.pyqtSignal(str)
    countChanged = QtCore.pyqtSignal()

    def __init__(self, parent=None):
        super(SuggestionPlaceModel, self).__init__(parent)
        self._manager = QtNetwork.QNetworkAccessManager(self)
        self._reply = None

    def count(self):
        return self.rowCount()

    count = QtCore.pyqtProperty(int, fget=count, notify=countChanged)

    @QtCore.pyqtSlot(str)
    def search(self, text):
        self.clear()
        self.countChanged.emit()
        if self._reply is not None:
            self._reply.abort()
        if text:
            r = self.create_request(text)
            self._reply = self._manager.get(r)
            self._reply.finished.connect(self.on_finished)
        loop = QtCore.QEventLoop()
        self.finished.connect(loop.quit)
        loop.exec_()

    def create_request(self, text):
        url = QtCore.QUrl("https://maps.googleapis.com/maps/api/place/autocomplete/json")
        query = QtCore.QUrlQuery()
        query.addQueryItem("key", API_KEY)
        query.addQueryItem("input", text)
        query.addQueryItem("types", "geocode")
        query.addQueryItem("language", "en")
        url.setQuery(query)
        request = QtNetwork.QNetworkRequest(url)
        return request

    @QtCore.pyqtSlot()
    def on_finished(self):
        reply = self.sender()
        if reply.error() == QtNetwork.QNetworkReply.NoError:
            data = json.loads(reply.readAll().data())
            if data['status'] == 'OK':
                for prediction in data['predictions']:
                    self.appendRow(QtGui.QStandardItem(prediction['description']))
            self.error.emit(data['status'])
        self.countChanged.emit()
        self.finished.emit()
        reply.deleteLater()
        self._reply = None

if __name__ == '__main__':
    app = QtGui.QGuiApplication(sys.argv)
    QtQml.qmlRegisterType(SuggestionPlaceModel, "PlaceModel", 1, 0, "SuggestionPlaceModel")
    engine = QtQml.QQmlApplicationEngine()
    qml_filename = os.path.join(os.path.dirname(__file__), 'main.qml')
    engine.load(QtCore.QUrl.fromLocalFile(qml_filename))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

import PlaceModel 1.0

ApplicationWindow {
    width: 400
    height: 400
    visible: true

    QtObject {
        id: internal
        property bool finished: false
        property bool busy: false
    }

    SuggestionPlaceModel{
        id: suggestion_model
        onFinished: {
            internal.busy = false
            if(count == 0) internal.finished = true
        }
    }

    TextField {
        anchors.centerIn: parent
        id: textfield
        onTextChanged: {
            internal.busy = true
            internal.finished = false
            Qt.callLater(suggestion_model.search, text)
        }
        Popup {
            id: popup
            y: parent.height
            visible: !internal.finished && textfield.length > 0
            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
            contentItem: Loader{
                    sourceComponent: internal.busy ? busy_component: lv_component
                }
        }
    }

    Component{
        id: busy_component
        BusyIndicator {
            running: true
        }
    }

    Component{
        id: lv_component
        ListView {
            implicitWidth: contentItem.childrenRect.width
            implicitHeight: contentHeight
            model: suggestion_model
            delegate: Text {
                text: model.display
                MouseArea{
                    id: mousearea
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {
                        textfield.text = model.display
                        internal.finished = true
                    }
                }
            }
        }
    }
}