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 over the next few weeks. Thanks for all your past and future contributions.

Google Suggest using Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to use Google Suggestion service using Qt Quick.

Article Metadata
Code ExampleCompatibility
Platform(s): Qt 4.7 and later
Keywords: Google Suggest
Created: lildeimos (22 Jan 2012)
Last edited: hamishwillee (13 Jun 2012)



This article shows how to make a Google Suggest component to be used in conjunction with a TextInput element.



    // GoogleSuggest.qml
import QtQuick 1.1
Rectangle {
id: googleSuggest
property string textToSugget
property string dsParam
property bool timeToDie: false
property int rowHeight: 30
width: parent.width
height: rowHeight*listView.count parent.bottom
anchors.left: parent.left
anchors.topMargin: 5
signal itemChoosen(string suggestion);
onTimeToDieChanged: googleSuggest.destroy();
XmlListModel {
id: xmlModel
source: ""+
(dsParam!=="" ? "&ds="+dsParam : "") +
query: "/toplevel/CompleteSuggestion"
XmlRole { name: "suggestion"; query: "suggestion/@data/string()" }
XmlRole { name: "num_queries"; query: "num_queries/@int/string()" }
ListView {
id: listView
anchors.fill: parent
cacheBuffer: 10
highlight: Rectangle { color: Qt.rgba(0,0,1,0.3); radius: 8; z: listView.z+10 }
highlightFollowsCurrentItem: true
interactive: false
currentIndex: -1
model: xmlModel
delegate: Rectangle {
id: resultRow
width: parent.width
height: rowHeight
color: (index % 2 === 0 ? "#ffffff" : "#eeeeff")
border.color: "#000000"
border.width: 1
radius: 8
Text {
id: result
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: numberOfResults.left
anchors.rightMargin: 10
font.pixelSize: 15
font.bold: true
text: suggestion
clip: true
Text {
id: numberOfResults
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 5
font.pixelSize: 12
font.italic: true
text: num_queries
MouseArea {
anchors.fill: listView
onMouseYChanged: {
listView.currentIndex = Math.floor((mouseY+rowHeight) / rowHeight) - 1;
onReleased: {
timeToDie = true;

An XmlListModel is used to retrieve the suggestions from Goolge. The query always returns 10 results that are shown in a ListView. When the user clicks on a row, the signal itemChoosen((string) is rised.

The functions below are used to dynamically load and unload the component. For example to pop it up when the user has entered at last 3 chars or unload it when TextInput.onAccept signal is rised.

    // gs.js
var componentGS;
var objectGS;
// dsParam = "yt" only for YouTube suggest else it is empty
function popupGoogleSuggest ( callerItem, textString, dsParam ) {
componentGS = Qt.createComponent("GoogleSuggest.qml");
objectGS = componentGS.createObject(callerItem);
if (objectGS === null) {
console.log("Error creating GoogleSuggest.qml", componentGS.errorString());
} else {
objectGS.textToSugget = textString;
objectGS.dsParam = dsParam;
return objectGS;
function deleteGoogleSuggest()
if (componentGS!==null && objectGS!==undefined) {
objectGS.timeToDie = true;


Inside TextInput component, we use a timer to create the GoogleSuggest component. The dynamic creation is triggered whenever the user has wrote more then 3 chars and it is deleted when the user hits the enter key. Also, if we are on a mobile device, the virtual keyboard must be closed with closeSoftwareInputPanel() function.

    // main.qml
import QtQuick 1.1
import "gs.js" as Functions
Rectangle {
id: main
width: 360
height: 360
Rectangle {
id: textContainer
x: 0; y:0; width: 250; height: 30
color: "#ffffff"
border.color: "#000000"
border.width: 1
TextInput {
id: textInput
property GoogleSuggest gsComponent
anchors.centerIn: parent
selectByMouse: true
text: "write here"
// Used to prevent predictive text to pop up while typing in a TextInput
// component. Else onTextChanged event isn't rised:
inputMethodHints: Qt.ImhNoPredictiveText
function googleSuggest_item_choosen(text)
Timer {
id: timerPopupGS
running: false
interval: 300
repeat: false
triggeredOnStart: false
onTriggered: {
if (textInput.focus && textInput.text !== "" && textInput.text.length > 2) {
// Pop up GoogleSuggest and catch itemChoosen signal
textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, "");
if (textInput.text.length<3) Functions.deleteGoogleSuggest();
onTextChanged: {
if (text.length<3) Functions.deleteGoogleSuggest();
onAccepted: {
// eventually close VK
onFocusChanged: {
if (!focus) closeSoftwareInputPanel();
if (!textInput.focus) {

Source Code

The full source code of the example is available here:

This page was last modified on 13 June 2012, at 10:53.
65 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.