Autocomplete and suggesstion in QML textInput element

Question

I have a QML textInput element like this:

TextBox.qml

FocusScope {
    id: focusScope
    property int fontSize: focusScope.height -30
    property int textBoxWidth: parent.width * 0.8
    property int textBoxHeight: 45
    property string placeHolder: 'Type something...'
    property bool isUserInTheMiddleOfEntringText: false
    width: textBoxWidth
    height: textBoxHeight

    Rectangle {
        width: parent.width
        height: parent.height
        border.color:'blue'
        border.width: 3
        radius: 0
        MouseArea {
            anchors.fill: parent
            onClicked: {
                focusScope.focus = true
                textInput.openSoftwareInputPanel()
            }
        }
    }
    Text {
        id: typeSomething
        anchors.fill: parent; anchors.rightMargin: 8
        verticalAlignment: Text.AlignVCenter
        text: placeHolder
        color: 'red'
        font.italic: true
        font.pointSize: fontSize
        MouseArea {
            anchors.fill: parent
            onClicked: {
                focusScope.focus = true
                textInput.openSoftwareInputPanel()
            }
        }

    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            focusScope.focus = true
            textInput.openSoftwareInputPanel()
        }
    }

    TextInput {
        id: textInput
        anchors {
            right: parent.right
            rightMargin: 8
            left: clear.right
            leftMargin: 8
            verticalCenter: parent.verticalCenter
        }
        focus: true
        selectByMouse: true
        font.pointSize: fontSize
    }



    Text {
        id: clear
        text: '\u2717'
        color: 'yellow'
        font.pointSize: 25
        opacity: 0
        visible: readOnlyTextBox ? false : true
        anchors {
            left: parent.left
            leftMargin: 8
            verticalCenter: parent.verticalCenter
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                textInput.text = ''
                focusScope.focus = true;
                textInput.openSoftwareInputPanel()
            }
        }
    }

    states: State {
        name: 'hasText'; when: textInput.text != ''
        PropertyChanges {
            target: typeSomething
            opacity: 0
        }
        PropertyChanges {
            target: clear
            opacity: 0.5
        }
    }

    transitions: [
        Transition {
            from: ''; to: 'hasText'
            NumberAnimation {
                exclude: typeSomething
                properties: 'opacity'
            }
        },
        Transition {
            from: 'hasText'; to: ''
            NumberAnimation {
                properties: 'opacity'
            }
        }
    ]
}

I want to add autocomplete and suggestions like google search to this text box. Autocomple get data from database and database return a list of dictionaries by a pyside SLOT.(or c++ slot)

How I can do this work?

Answer 1

I was looking for something very similar: a QML autocomplete component built around QML TextField, rather than the lower-level, more flexible but also more work intensive TextInput as in the question.

Since I could not find that, I implemented it. If anyone wants to use it: it's licensed under MIT and available as part of an application I am developing. You find the component in src/qml/AutoComplete.qml, and the application may serve as usage example. Features:

• highlighting of autocompleted characters in bold, as in Google Search
• Key bindings (navigating with arrow keys, Return / Enter, Esc to close completion box, Esc Esc to unfocus)
• uses a simple QStringList as model for now, with the application showing how to update the model with live SQL database queries when the next key is pressed
• heavily documented code, so it should be easy enough to adapt

Let me know if this is useful, I might then package it as a Qt QPM package or even try to make it mature enough to be added to the QML UI library KDE Kirigami.

Answer 2

Take a look at this code: https://github.com/jturcotte/liquid/blob/master/qml/content/SuggestionBox.qml

I bet it will do the job.

Edit:

Code that linked above is somewhat complicated and requires C++ backend, so I simplified it and made pure Qml example application, that you can play with, edit a little and apply to your needs. Sources can be found here. Most important things there are:

1. This implementation of SuggestionBox that uses some sort of model as it's source for completing/suggesting something
2. Its signal itemSelected(item) will be emitted every time user clicks on item
3. Main component of application that binds its LineEdit component to SuggestionBox

Note that code is quite rough and written for a sake of example.