Flex Google Style Inline Auto Suggest Search Field

by klejnieks on September 5, 2008

A quick little POC for building a drop down inline auto suggest, google style search field. The search is hitting a MySQL database populated with over 30,000 records, mind you some / a lot of them are duplicates and laziness forces me not to clean the data for this POC but it still proves the point.

Try it out below, you can see instant responses from the server back to flex creating a very responsive and realtime feel. The search is looking through over 30,000 records. View source is enabled as well. Click on the Search text field and try searching for general things like the letter “A” or more fine grained terms like “Led”. The search polls the database on a short interval using setTimeout().

private function onKeyUp( e:KeyboardEvent ):void
{
	if( TextInput(e.currentTarget).text.length != 0 )
	{
		__interval = setTimeout(query, 100);
	}
	else
	{
		dgUserRequest.visible = false;
	}
}


You can modify the interval length, but from my testing I felt that 100 milliseconds was a good time for someone to type letter by letter and see instant responses, as well as not slow someone down who types rather fast and knows the search terms they are looking for.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Source includes the MySQL database, Request.php which proctors the requests, and all the flex goodness. Source can be found here: http://projects.lejnieks.com/flex_inline_search_poc/inline_search.html

{ 1 comment… read it below or add one }

1

abhishek 11.11.08 at 1:21 am

hello frnd,
its really nice example,
send me if u have more good practical samples with good styles in flex or air
thx, :)

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>