Display Google’s search result within your flex application

With the use of the Google AJAX Search API, you can query and display the search results within your flex application. See a sample application by clicking here (view source is enabled in the sample app).

In this post, I am going to show you how easy it is to query for and display the search results of Google within Flex.

In this example, we are going to use HTTPService to communicate with the Search API. Following is what I wrote:

var serviceWebSearch:HTTPService = new HTTPService();
serviceWebSearch.url = ‘http://ajax.googleapis.com/ajax/services/search/web’;
serviceWebSearch.request.v = ‘1.0′;
serviceWebSearch.request.q = ‘SEARCH KEY WORD’;
serviceWebSearch.request.start=1;
serviceWebSearch.request.rsz=’large’
serviceWebSearch.resultFormat = ‘text’;
serviceWebSearch.addEventListener(ResultEvent.RESULT, onWebSearchResponse);

In the above search request, the ‘rsz’ value can set to small or large, small will fetch 4 results and large will fetch 8 results, also, the start value can be set as any other integer to start from that particular row, this is a useful value to achieve pagination with the search results.

By using the above mentioned code, the result event handler (onWebSearchResponse) will be invoked when the result is returned from the API. It is important to to note that the Google search API’s response is a JSON encoded result set with embedded status codes. To know more about JSON, please visit http://json.org.

You can use JSON from the AS3 Core Library to decode the JSON response. Following is what I wrote:

private function onWebSearchResponse(event:ResultEvent):void {
                 try {
                    var json:Object = JSON.decode(event.result as String);
                    var results:Array = json.responseData.results;
                    webSearchResults = new ArrayCollection(results);
                    }

                    catch(ignored:Error) {
                    }
            }

By doing this, the webSearchResults ArrayCollection will contain the web search result object, The following properties will be existing in the result:

.unescapedUrl  
.url  
.visibleUrl  
.title  
.titleNoFormatting  
.content  
.cacheUrl  

 

Along with the search results, the response also contains a ‘cursor’ object which can be used for pagination.

Also note that when using Google’s AJAX search API, you must abide by all the terms of use of the Google search API.

Where to go from here:

Read more about Google AJAX Search API

Read the Google AJAX Search API Class Reference

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

[...] Vote Display Google’s search result within your flex application [...]

Hey, I build a AS3 library to do this, maybe this can speed things up a bit.
You can find it at http://labs.boulevart.be/index.php/2008/12/15/google-as3-api/

You should try and sell your flex components at FlexDownloads.com If you need any help in uploading your files/projects please email ur files to support@flexdownloads.com with your registered username at FlexDownloads.com

Leave a comment

(required)

(required)