QML Google Suggest

[toc align_right="yes" depth="2"]

Google Suggest

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

This is what it looks like:

Google Suggest

Implementation

// GoogleSuggest.qml<br />import QtQuick 1.1

Rectangle {<br /> id: googleSuggest<br /> property string textToSugget<br /> property string dsParam<br /> property bool timeToDie: false<br /> property int rowHeight: 30<br /> width: parent.width<br /> height: rowHeight*listView.count<br /> anchors.top: parent.bottom<br /> anchors.left: parent.left<br /> anchors.topMargin: 5

signal itemChoosen(string suggestion);

onTimeToDieChanged: googleSuggest.destroy();

XmlListModel {<br /> id: xmlModel<br /> source: &quot;http://suggestqueries.google.com/complete/search?output=toolbar&amp;quot;+<br /> (dsParam!==&quot;&quot; ? &quot;&amp;ds=&quot;''dsParam : &quot;&quot;)''<br /> &quot;&amp;q=&quot;+textToSugget

query: &quot;/toplevel/CompleteSuggestion&amp;quot;

XmlRole { name: &quot;suggestion&amp;quot;; query: &quot;suggestion/

data/string()" }
XmlRole { name: "num_queries"; query: "num_queries/

int/string()&quot; }<br /> }

ListView {<br /> id: listView<br /> anchors.fill: parent<br /> cacheBuffer: 10<br /> highlight: Rectangle { color: Qt.rgba(0,0,1,0.3); radius: 8; z: listView.z+10 }<br /> highlightFollowsCurrentItem: true<br /> interactive: false<br /> currentIndex: <s>1
<br /> model: xmlModel<br /> delegate: Rectangle {<br /> id: resultRow
<br /> width: parent.width<br /> height: rowHeight<br /> color: (index % 2 === 0 ? &quot;#ffffff&amp;quot; : &quot;#eeeeff&amp;quot;)<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1<br /> radius: 8
<br /> Text {<br /> id: result<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.left: parent.left<br /> anchors.leftMargin: 5<br /> anchors.right: numberOfResults.left<br /> anchors.rightMargin: 10<br /> font.pixelSize: 15<br /> font.bold: true<br /> text: suggestion<br /> clip: true<br /> }<br /> Text {<br /> id: numberOfResults<br /> anchors.verticalCenter: parent.verticalCenter<br /> anchors.right: parent.right<br /> anchors.rightMargin: 5<br /> font.pixelSize: 12<br /> font.italic: true<br /> text: num_queries<br /> }
<br /> }
<br /> MouseArea {<br /> anchors.fill: listView<br /> onMouseYChanged: {<br /> listView.currentIndex = Math.floor((mouseY+rowHeight) / rowHeight)</s> 1;<br /> }<br /> onReleased: {<br /> googleSuggest.itemChoosen(xmlModel.get(listView.currentIndex).suggestion);<br /> timeToDie = true;<br /> }<br /> }<br /> }<br />}<br />

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

// gs.js<br />var componentGS;<br />var objectGS;

// dsParam = &quot;yt&amp;quot; only for YouTube suggest else it is empty<br />function popupGoogleSuggest ( callerItem, textString, dsParam ) {

deleteGoogleSuggest();<br /> componentGS = Qt.createComponent(&quot;GoogleSuggest.qml&amp;quot;);<br /> objectGS = componentGS.createObject(callerItem);<br /> if (objectGS === null) {<br /> console.log(&quot;Error creating GoogleSuggest.qml&amp;quot;, componentGS.errorString());<br /> } else {<br /> objectGS.textToSugget = textString;<br /> objectGS.dsParam = dsParam;<br /> }<br /> return objectGS;<br />}

function deleteGoogleSuggest()<br />{<br /> if (componentGS[[Image:==null &amp;&amp; objectGS|==null &amp;&amp; objectGS]]==undefined) {<br /> objectGS.timeToDie = true;<br /> }<br />}

Usage

import QtQuick 1.1<br />import &quot;gs.js&amp;quot; as Functions

Rectangle {<br /> id: main<br /> width: 360<br /> height: 360

Rectangle {<br /> id: textContainer<br /> x: 0; y:0; width: 250; height: 30<br /> color: &quot;#ffffff&amp;quot;<br /> border.color: &quot;#000000&amp;quot;<br /> border.width: 1

TextInput {<br /> id: textInput<br /> property GoogleSuggest gsComponent<br /> anchors.centerIn: parent<br /> selectByMouse: true<br /> text: &quot;write here&amp;quot;

// Used to prevent predictive text to pop up while typing in a TextInput<br /> // component. Else onTextChanged event isn't rised:<br /> // https://bugreports.qt.nokia.com/browse/QTBUG-22298<br /> inputMethodHints: Qt.ImhNoPredictiveText

function googleSuggest_item_choosen(text)<br /> {<br /> textInput.text=text;<br /> }

Timer {<br /> id: timerPopupGS<br /> running: false<br /> interval: 300<br /> repeat: false<br /> triggeredOnStart: false<br /> onTriggered: {<br /> if (textInput.focus &amp;&amp; textInput.text !== &quot;&quot; &amp;&amp; textInput.text.length &gt; 2) {<br /> // Pop up GoogleSuggest and catch itemChoosen signal<br /> textInput.gsComponent = Functions.popupGoogleSuggest(textContainer, textInput.text, &quot;&quot;);<br /> textInput.gsComponent.itemChoosen.connect(textInput.googleSuggest_item_choosen);<br /> }<br /> if (textInput.text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> }

onTextChanged: {<br /> timerPopupGS.restart();<br /> if (text.length&amp;lt;3) Functions.deleteGoogleSuggest();<br /> }<br /> onAccepted: {<br /> // eventually close VK<br /> closeSoftwareInputPanel();<br /> Functions.deleteGoogleSuggest();<br /> }<br /> onFocusChanged: {<br /> if (!focus) closeSoftwareInputPanel();<br /> if (!textInput.focus) {<br /> Functions.deleteGoogleSuggest();<br /> }<br /> }<br /> }

}<br />}