Autocomplete and suggesstion in QML textInput element

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.

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.