IMDb Suggest with jQuery Autocomplete

Using IMDb's Movie Title Suggestion feature on your website.

Search:

Overview:

IMDb provids it's own flavor of intuitive search suggestions on its website. I wanted to implement a similar feature on my website and use the search suggestions from IMDb.com. I hacked around to look for the JSON url for pulling suggestions from IMDb, finally I found the source and a way to trim it to my requirements. I implemented a PHP Proxy script to pull the JSON data from IMDb and format it according to jQuery Autocomplete Widget reuirements. Here is a complete guide for setting up the search suggestions on your site.

Requirements:

This API uses jQuery and jQueryUI so you need to include that in the HEAD section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

For fetching search suggestions in JSON format from IMDb, I have used a PHP proxy script which can be downloaded here.

For fetching poster images from IMDb, I have used a PHP proxy script which can be downloaded here.

For displaying autocomplete suggestions in custom styling, we have to extend the jQuery Autocomplete widget as described in the Autocomplete widget documentation http://jqueryui.com/demos/autocomplete/#custom-data.

For styling the search engine cateogy in the dropdown, you can use and modify the CSS code shown below:

Configuration Options

There is nothing much to configure in this script. The IMDb PHP proxy script returns the results in JSON format with following parameters for each title:
  1. label: Tile of the movie, actor etc.
  2. value: Unique IMDb Id for the entity.
  3. cast: Cast for the title.
  4. img: Poster image for the entity.
  5. q: Type of the title (feature, documentry, TV series etc.).
Example: http://lab.abhinayrathore.com/imdb_suggest/suggest.php?term=in
Styling the autocomplete dropdown:
For styling the dropdown according to your needs you can edit the "_renderItem" function in the JavaScript code along with the CSS styles.

For displaying the search suggestion in the search field when you select or focus on the dropdown menu item, modify the select and focus methods in the JavaScript code.

Demo Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMDb Suggest with jQuery Autocomplete</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#q").focus(); //Focus on search field
	$("#q").autocomplete({
		minLength: 0,
		delay:5,
		source: "suggest.php",
		focus: function( event, ui ) {
			$(this).val( ui.item.value );
			return false;
		},
		select: function( event, ui ) {
			$(this).val( ui.item.value );
			return false;
		}
	}).data("uiAutocomplete")._renderItem = function( ul, item ) {
		return $("<li></li>")
			.data( "item.autocomplete", item )
			.append( "<a>" + (item.img?"<img class='imdbImage' src='imdbImage.php?url=" + item.img + "' />":"") + "<span class='imdbTitle'>" + item.label + "</span>" + (item.cast?"<br /><span class='imdbCast'>" + item.cast + "</span>":"") + "<div class='clear'></div></a>" )
			.appendTo( ul );
	};
});
</script>
<style type="text/css">
.ui-menu-item .imdbTitle{
	font-size: 0.9em;
	font-weight: bold;
}
.ui-menu-item .imdbCast{
	font-size: 0.7em;
	font-style: italic;
	line-height: 110%;
	color: #666;
}
.ui-menu-item .imdbImage{
	float: left;
	margin-right: 5px;
}
.ui-menu-item .clear{
	clear: both;
}
</style>
</head>
<body>
	<form id="form" name="form" method="get" action="http://www.imdb.com/find" style="text-align:center; margin-bottom:20px;">
		Search: 
		<input name="q" id="q" type="text" size="50" />
		<input name="s" value="all" type="hidden" />
		<input name="submit" type="submit" value="Search" />
	</form>
</body>
</html>

Download

Download the PHP script for pulling JSON search suggestions from IMDb.com.
Download the PHP proxy script for pulling poster images from IMDb.com.

My Website | My Blog