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:
- This implementation of SuggestionBox that uses some sort of model as it's source for completing/suggesting something
- Its signal itemSelected(item) will be emitted every time user clicks on item
- Main component of application that binds its LineEdit component to SuggestionBox
Note that code is quite rough and written for a sake of example.