Autocomplete and suggestion in QML text

Question

I have a QML text input 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, such as searching in this text box. Autocomple retrieves data from the database and the database, returning a list of dictionaries using pyside SLOT. (Or C ++ slot)

How can I do this job?

Answer 1

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

I bet he will do the job.

Edit:

The code linked above is somewhat complex and requires a C ++ backend, so I simplified it and made it a pure example of a Qml application that you can play with, change a little and apply it to your needs. Sources can be found here . Most importantly, there are:

• This is a SuggestionBox implementation that uses some kind of model as a source to complete / offer something
• Its itemSelected (item) will be called every time the user clicks on the item.
• The main component of an application that associates its LineEdit component with a sentence

Please note that the code is rather crude and written for example.