AboutFlex.net

flex,air,flash …

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

  1. Mário Santos Said,

    Now it becames really usefull :)

    Nice idea to use the autoComplete and now it really seems a great component. initially i thought that using php to make some large quantity of requests could slow down the process, but it seems not :)

    Cheers!

Add A Comment