[FIXED] Autocomplete and suggesstion in QML textInput element

Issue

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?

Solution

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.

Answered By - dant3