Tools

Namespaces

Variants

Views

Actions

Search

Contents

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

This article shows how to develop and use a simple line-edit with autocompletion as a reusable Qt Quick Component. The demo application in this article uses the model for autocompletion from Qt C++ code, making this article useful for learning how to use C++ code with QML as well. You can also watch the video of the demo application here and download its source code from here.

Contents

Basic Structure

The structure for this component is relatively simple and it has two main elements.

1. Line edit2. Autocompletion list

The line-edit would be a BorderImage element containing a TextInput element. For the Autocompletion list we would use a ListView and since we are making a component - we would like the model of the ListView and some properties of list (model, border color of list items, border image and item color) to be customizable from outside.

The QML file of the component would look like the following at a higher level,

LineEdit and Autocomplete ListView

With the basic structure in place, it is now time to slightly align and beautify the editBar and the autocompletion listView.
For the editBar, we add some anchors to the TextInput. Also note that we also expose the propery text of the TextInput, so that it can be accessed from outside.

Now for the Listview, we declare the delegate element as a Rectangle containg a Text element. We add number animations for the height property of the delegate with an easing curve. Adding these animations with easing curves makes the list to appear nicely, when items are added or removed from the ListView.

Implementing the logic

We now start implementing some logic. To understand further additions more clearly, lets take an example data model that we would provide to this component in our demo application. We would be using data model from Wikipedia API (using action opensearch) in our demo application. The Line-edit in our demo application would provide autocompletion for all Wikipedia available articles.

We can add the macro Q_INVOKABLE to the definition of the fetchModel function to allow them to be accessed from QML. However, it is not that straightforward to do so since the HTTP get request is asynchronous. Here comes the signals and slot in the picture!

We are going to use a couple of signal and slots here. One would be the signal when the HTTP response is finished,

Picking up from where we stopped on the QML code, we need to add an event handler to the line-edit to make a HTTP get request from the Qt code, whenever the text in the line-edit is changed. We would simply do it by adding the following code to our line-edit.

onTextChanged:{// == Http get request when the Text is changed== // logic.fetchModel(editBar.text)}

What is the use of an autocompletion list when the user cannot interact with it? Wouldn't it make sense to for the text in the line-edit to be set to the text that user selects from Autocompletion list? Let's add an MouseArea to the ListView to obtain this,

Video demo

The video below shows the demo app that we created above in the above sections.

The media player is loading...

Exercise for the readers

I leave it as an exercise for the readers to aggregate content from this article and make a working demo - hopefully you will learn more while doing so. If you face any problems to get this running, you may refer to the source code here - File:AutocompleteLE.zip. This article explained in detail how you can create an Autocompletion QML UI component and how you can interface it with Qt code (that is, using Qt logic and engine for your Qt Quick applications).

If you have any questions while you try to use this component or while building your own components - kindly use the comments tab of this article to discuss or send me an email from this link.