<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flashcommander &#187; Google Suggest</title>
	<atom:link href="http://flashcommander.org/blog/tag/google-suggest/feed" rel="self" type="application/rss+xml" />
	<link>http://flashcommander.org</link>
	<description>Flex, Flash, Air, Android, web development</description>
	<lastBuildDate>Thu, 26 May 2011 13:27:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Using Google Search Suggest with Flex 4 AutoComplete</title>
		<link>http://flashcommander.org/blog/google-search-suggest-flex-4-autocomplete</link>
		<comments>http://flashcommander.org/blog/google-search-suggest-flex-4-autocomplete#comments</comments>
		<pubDate>Sat, 06 Feb 2010 15:53:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[AutoComplete]]></category>
		<category><![CDATA[Flex 4]]></category>
		<category><![CDATA[Google Search]]></category>
		<category><![CDATA[Google Suggest]]></category>
		<category><![CDATA[Spark]]></category>

		<guid isPermaLink="false">http://flashcommander.org/?p=385</guid>
		<description><![CDATA[This article demonstrates how to use Flex 4 AutoComplete with Google Search Suggest. First I use the Google Suggest API to show search suggestions in the AutoComplete as the user types in the input. Then I use the Google Search &#8230; <a href="http://flashcommander.org/blog/google-search-suggest-flex-4-autocomplete">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>This article demonstrates how to use <a href="/blog/flex-4-autocomplete">Flex 4 AutoComplete</a> with Google Search Suggest.<br />
First I use the Google Suggest API to show search suggestions in the AutoComplete as the user types in the input. Then I use the Google Search API to perform a Google search with the selected phrase.<br />
<span id="more-385"></span><br />
Let&#8217;s see first how the finished application works &#8211; <strong>View source is enabled</strong>:</p>
<p><iframe class="flashcontent" src="/SparkAutoComplete/bin-release/googlesearch.html" width="100%" height="300" frameborder="0"></iframe></p>
<p>When user starts to type into search input we use an <code>HttpService</code> to get search suggestions from Google. </p>
<p>You can notice in the code sample below that the direct url is commented out. This is because the lack of a crossdomain.xml on Google&#8217;s servers prevent Flash from calling this url. So we call a php script instead in our domain that will load the data from Google and sends it back to Flash. </p>
<p>You can call the direct url in a browser to see the structure of the xml result. The result is an xml list that we feed into the dataprovider of the AutoComplete.</p>
<pre><span class="MXMLComponent_Tag">&lt;components:AutoComplete</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">autoC</span><span class="MXMLDefault_Text">" change="</span><span class="ActionScriptDefault_Text">onChange</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">" labelFunction="</span><span class="MXMLString">labelFunction</span><span class="MXMLDefault_Text">"
    select="</span><span class="ActionScriptDefault_Text">search</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">" enter="</span><span class="ActionScriptDefault_Text">search</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">200</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>

<span class="MXMLComponent_Tag">&lt;s:HTTPService</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">googleSuggest</span><span class="MXMLDefault_Text">" result="</span><span class="ActionScriptDefault_Text">onResult</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"
    showBusyCursor="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"
    resultFormat="</span><span class="MXMLString">e4x</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>

<span class="ActionScriptReserved">private</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">onChange</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">{</span>
    <span class="ActionScriptvar">var</span><span class="ActionScriptDefault_Text"> s = autoC.text;</span>
    <span class="ActionScriptComment">//googleSuggest.url = "http://google.com/complete/search?output=toolbar&amp;q=" + s;</span>
    <span class="ActionScriptDefault_Text">googleSuggest</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">url</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptString">"../data/googlesuggest.php?q="</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">s</span>;
    <span class="ActionScriptDefault_Text">googleSuggest</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">send</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
<span class="ActionScriptBracket/Brace">}</span>

<span class="ActionScriptReserved">private</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">onResult</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span>:<span class="ActionScriptDefault_Text">ResultEvent</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">{</span>
    <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">xmlList</span>:<span class="ActionScriptDefault_Text">XMLList</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">googleSuggest</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">lastResult</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">CompleteSuggestion</span> <span class="ActionScriptReserved">as</span> <span class="ActionScriptDefault_Text">XMLList</span>
    <span class="ActionScriptDefault_Text">autoC</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">dataProvider</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">new</span> <span class="ActionScriptDefault_Text">XMLListCollection</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">xmlList</span><span class="ActionScriptBracket/Brace">)</span>;
<span class="ActionScriptBracket/Brace">}</span>
</pre>
<p>We use another HttpService to call Google Search &#8211; this time the result format is a JSON string.<br />
No proxy is needed because this service has a crossdomain.xml in place and accepts Flash calls.</p>
<p>The process is simple: when user presses enter or selects a suggestion in the AutoComplete we send the text to Google. </p>
<p>The result is then converted from JSON into Actionscript and displayed in a datagroup.</p>
<pre><span class="MXMLComponent_Tag">&lt;s:HTTPService</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">googleSearch</span><span class="MXMLDefault_Text">" result="</span><span class="ActionScriptDefault_Text">onSearchResult</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLDefault_Text">"
    showBusyCursor="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"
    resultFormat="</span><span class="MXMLString">text</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>

<span class="ActionScriptReserved">private</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">search</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">{</span>
    <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">s</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">autoC</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">text</span>
    <span class="ActionScriptDefault_Text">googleSearch</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">url</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptString">'http://ajax.googleapis.com/ajax/services/search/web'</span>;
    <span class="ActionScriptDefault_Text">googleSearch</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">request</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">v</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptString">'1.0'</span>;
    <span class="ActionScriptDefault_Text">googleSearch</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">request</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">q</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">s</span>;
    <span class="ActionScriptDefault_Text">googleSearch</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">send</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
<span class="ActionScriptBracket/Brace">}</span>

<span class="ActionScriptReserved">private</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">onSearchResult</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span>:<span class="ActionScriptDefault_Text">ResultEvent</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">{</span>
    <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">result</span>:<span class="ActionScriptDefault_Text">Object</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">JSON</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">decode</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">event</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">result</span> <span class="ActionScriptReserved">as</span> <span class="ActionScriptDefault_Text">String</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">responseData</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">results</span>;
    <span class="ActionScriptDefault_Text">searchResults</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">dataProvider</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptReserved">new</span> <span class="ActionScriptDefault_Text">ArrayList</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">result</span> <span class="ActionScriptReserved">as</span> <span class="ActionScriptDefault_Text">Array</span><span class="ActionScriptBracket/Brace">)</span>;
<span class="ActionScriptBracket/Brace">}</span>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://flashcommander.org/blog/google-search-suggest-flex-4-autocomplete/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

