— lejnieks

Flex Google Style Inline Auto Suggest Search Field

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.

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