Google Suggester for Web Applications with AutoComplete
Posted by Fedele Marotti under ActionScript 3, Components, Flex
This example shows you how to display Google suggestes inside the AutoComplete component
developed by the Adobe Flex Team ;
The example uses a class developed for Air content by the AboutFlex Team
and a bridge in PHP developed by msdevstudio.com
that allows us to use the class in an online content;
This movie requires Flash Player 9
the Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
creationComplete="init()"
layout="vertical"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ns1="it.creativesource.*" width="500" height="500">
<mx:Script>
<![CDATA[
import it.creativesource.GoogleSuggester;
private var gs:GoogleSuggester ;
private function init():void{
gs=new GoogleSuggester ();
gs.addEventListener(gs.SUGGESTED,displayResults)
}
private function findSuggests(e:KeyboardEvent):void{
if(e.keyCode!=38)
if(e.keyCode!=40){
gs.findSuggests(e.currentTarget.typedText)
}
}
private function displayResults(e:Event):void{
try{
autoComplete.dataProvider=e.currentTarget.dataProvider;
if(e.currentTarget.dataProvider.length>1)
autoComplete.open();
}catch(e:*){}
}
]]>
</mx:Script>
<ns1:AutoComplete id="autoComplete"
keepLocalHistory="true"
keyUp="findSuggests(event)"
lookAhead="true" labelField="word" />
</mx:Application>
The GoogleSuggester.as class:
package it.creativesource
{
import flash.display.Sprite;
import flash.events.Event;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
[Event(name="suggested", type="flash.events.Event")]
public class GoogleSuggester extends Sprite
{
public const SUGGESTED:String='suggested';
private var _dataProvider:ArrayCollection=new ArrayCollection();
public function GoogleSuggester()
{
}
public function findSuggests(string:String):void{
var hs:HTTPService=new HTTPService();
/*use our server-side script send.php to get suggestions*/
hs.url=Path.URL+"send.php?q="+string+"&cp="+string.length;
hs.addEventListener(ResultEvent.RESULT,parseResults)
hs.send();
_dataProvider=new ArrayCollection();
var item:Object={};
item['word'] = string;
_dataProvider.addItem(item);
}
protected function parseResults(e:ResultEvent):void{
try{
var tmp:Array=e.result.split('new Array')[1].split(', "');
for (var i:int=1;i<tmp.length-1;i+=2){
tmp[i]=tmp[i].replace('"',"");
tmp[i]=tmp[i].replace('\\x27',"'");
var item:Object={};
item['word'] = tmp[i];
_dataProvider.addItem(item);
}
}catch(e:*){}
dispatchEvent(new Event('suggested'));
}
public function get dataProvider():ArrayCollection{
return _dataProvider;
}
}
}
the Path.as class:
package it.creativesource
{
public class Path
{
static public const URL:String="http://www.aboutflex.net/labs/googleSuggesterOnLine/";
}
}
The send.php script ( thanks to msdevstudio ):
<?php
$host="http://www.google.com";
$text=$_GET['q'];
$len=$_GET['cp'];
$text=str_replace(" ","%20",$text);
$instruction="/complete/search?hl=en&client=suggest&js=true&q=".$text."&cp=".$len;
$url=$host.$instruction;
if ((double)phpversion() >= 4.2)
{
ini_set('allow_url_fopen', '1');
}
$s = @file_get_contents($url);
if (empty($s))
{
echo "";
}
else
{
echo $s;
}
?>
The AutoComplete.as class here
