Sunday, October 30, 2011

IMDb Search Suggestions with jQuery Autocomplete

In conjunction of my previous posts on IMDb Scraper API and jQuery Autocomplete with multiple search suggestions, on popular demand, I’ve created yet another search suggestion tool to fetch suggestions from IMDb.com. I’ve implemented a simple PHP Proxy script to get search suggestions from IMDb and format it according to jQuery Autocomplete Widget’s JSON data format.

For downloading and a guide to setup the suggestions tool on your website please visit the demo page on my labs section. You will need the suggest.php and imdbImage.php Proxy files for pulling content from IMDb.

Demo: http://lab.abhinayrathore.com/imdb_suggest/

IMDb’s suggestion API provides Title Name, Title Id, Cast, Type and Poster URL to display in the dropdown. You can customize the JavaScript code for your needs. IMDb has a leechers policy in place for media images so I’ve also included a PHP Proxy script to show IMDb Posters on search dropdown.

34 comments:

  1. Hi,

    thanks for the code.
    But what would really interest me is how to set up a similar auto suggest system. I don't want to make a query to the database each time the user types in the search field. That's slow and puts pressure on the database.
    It seems that imdb caches the results in JSON format as a file which then is returned as you type. I would guess they have thousands of these cached files each one depending of the first letters you type... Just a guess though, i'm not sure exactly how they impelemented it. All i know is that it's lightning fast and it searches within thousands and thousands of results. I doubt it queries their database...

    Any idea how their autosuggest works and how i could build a similar system?

    ReplyDelete
  2. Abhinay, One problem I see with your demo is that if there is no json file on the imdb suggestions api, your search suggestions disappear. So, for example, if you type "Empir", you're good up until you hit that final letter "r".

    ReplyDelete
  3. To build a similar system:

    It appears that IMDb has created a structure of 36 folders (one for each letter of the alphabet and number), and inside each folder holds the results for UP TO 4 characters of searching (notice that on IMDB the 5th character does NOT change your results, and on Abhinay's demo, the suggestions disappear).

    Now, they do not have a file for EVERY possible 4 characters, only the ones that would have any suggestions. So, the file for "HOLL" would contain anything with the word "hollow", "holly", "holler", etc. But the file "HOLW" would not even exist. Now, on IMDd, as you type "HOLW" you would see the results of file "HOL", and those results WOULD STAY as you hit the "W", since "HOLW" contains nothing. Abhinay, you may want to update your demo to do the same.

    It also appears that each can contain a "hit" if ANY word in the title matches based upon the first x chars.

    So, the only question that remains is how to get the files out there to begin with? Either periodic routines that loop through the database, or in the record add/update script that maintains the records. Notice that IMDb ONLY displays up to 6 matches (at least in my quick tests). How does it decide WHICH matches to show for the letter "H"? There must be some sort of weighting system, and as the system tries to update the "H" file, with, for instance "Sherlock Holmes", it compares the weight of the new entry with the weight of existing entries.

    Obviously this is only my intuition based upon what I've seen, and I'd appreciate any feedback on my suggested methodology :)

    ReplyDelete
    Replies
    1. Thanks for the input. It seems doable.
      The only challenge is the weighing algorithm they use.
      It shows the top 6 results but mostly matches the most popular matches.

      Delete
    2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

      Delete
  4. As mentioned above, the search suggestions disappear if there is no json file on imdb. I therefore added some code to trim the search term until a valid result is obtained. I replaced lines 14 and 15:

    $url = "http://sg.media-imdb.com/suggests/${firstchar}/${search}.json"; //format IMDb suggest URL
    $jsonp = file_get_contents($url); //get JSONP data

    With the following code:

    do {
    $jsonp = @file_get_contents("http://sg.media-imdb.com/suggests/${firstchar}/${search}.json"); //get JSONP data
    $search = substr($search,0,-1);
    } while (!$jsonp);

    ReplyDelete
    Replies
    1. Thanks a lot for sharing your info, it was really useful :)

      Delete
  5. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 player

    ReplyDelete
  6. Is there a way to limit the results that IMDB returns to only the titles of TV shows and Movies? If not, is there a way to determine if the result selected is an actor/tv show/movie/etc?

    ReplyDelete
    Replies
    1. Nevermind... q gives all the info I need...

      Delete
    2. @Rob: Could you fix it? (I am trying to get only movie titles and Not actor names, or tv-series.. but I don't know how :|)

      Delete
  7. Is there a way so when I click on a movie on the input search to be displayed the movie name instead of something like "tt0367677"?

    Thank you.

    ReplyDelete
  8. hi, I just check your nice work, but it seems, in the time something is broken, now I got just names without images, so it seems it is just normal autocomplete, if possible, please look at it, and fix. Also when I load the page, I get error in firebug:

    TypeError: $(...).autocomplete(...).data(...) is undefined
    [Break On This Error]

    }).data("autocomplete")._renderItem = function( ul, item ) {

    I am new to jQuery, so I am unable to fix your work for now.

    ReplyDelete
  9. spent 1 hour or so on this. I really "like" this...anyway, read here more: http://bugs.jqueryui.com/ticket/8996 the fix is just replace here " }).data("uiAutocomplete")._renderItem = function( ul, item ) {" then it works like it should!

    ReplyDelete
  10. Thanks a lot for the research Brano. I've updated the code to work with jQuery UI v1.10 and later. For users below v1.10, you'll have to use ".data("autocomplete")._renderItem" instead of ".data("uiAutocomplete")._renderItem".

    ReplyDelete
  11. Hi!

    I really like the script. Unfortunately, there is one thing that I can not solve. So far, the search worked properly but now unfortunately completely slips and does not work properly. I saw the demo site that was the problem, but it solved the problem. May I ask what was the problem?

    Menta

    ReplyDelete
  12. Hi,

    I am new to javascript. Is there any way to NOT display the tt0000000 on hover and select? Just to click on the suggestion, hit enter or click and it submits the search?

    I can find myself if I knew what I was trying to google for ;)

    ReplyDelete
  13. To show the movie name in search box and get clickable links to the movie change the following lines;


    focus: function( event, ui ) {
    $(this).val( ui.item.label );
    return false;
    },
    select: function( event, ui ) {
    window.location = "http://imdb.com/title/" + ui.item.value;
    return false;
    }

    ReplyDelete
  14. It has some problems with some movie posters.For example for Don Jon the poster is 1271X1991.

    ReplyDelete
    Replies
    1. I also faced this issue, Could you find a solution for this? :|

      Delete
  15. Thx for great work, but I have problem with drop down menu. When I test I can see images and text but I can see drop down menu. Strange ....pls help...

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. I noticed that when we type something in the search box, for example "Gone", (in case that I am looking for "Gone Girl") when we are going up or down in dropdown menu what we wrote in search box is changed .. for example if I write Gone .. and my mouse goes to "Zoe Gone", the Gone that I wrote in textbox will be replaced with "Zoe Gone".. While in IMDb, whatever you type in the textbox will be kept..

    ReplyDelete
  18. How to get this to work with jQuery v2.1.1 ?

    ReplyDelete
  19. im pretty new at this but i s there anyway to keep the autofill? but somehow if i were to type in Brad Pitt id nevigate to my own custome html file?

    ReplyDelete
  20. Sir I am new to php and jquery I will be very very thankful to you if you can upload it on GitHub and can give link of GitHub.

    ReplyDelete
  21. take a look at this autocomplete, it's awesome, http://justwebcode.blogspot.com/2017/07/autocomplete-textbox-with-jquery.html

    ReplyDelete
  22. mytectra placement Portal is a Web based portal brings Potentials Employers and myTectra Candidates on a common platform for placement assistance.

    ReplyDelete
  23. Guaranteed #1 Search Engine Ranking Supreme Free Viral Traffic Join Now Get Millions Of Hits Free To Your Site/Blog!

    PornKings Adult Shopping Backlinks-Shopping Mega Store Legendary Stars As Stormy Daniels,Shawna Edwards,Jenna Jamison-New Adult Stars Movies,Adult Toys,Enhancers,Merchandise-More !

    Hits Express Rotator System Do You Need Visitors to Your Website or Affiliate Program? If your looking to gain more visitors to your website Hits Express is your answer. With our program your site is being shown to people all over the world 24/7 365 days a year!

    PAYDIR Free For All Forum Portal Search Engine Crawled Network PR10 Ranking Information Forum XXX!

    FreeLinkExchanges Be Seen In 12 Nations 312 Sites Over 30 Millions Viewers Monthly Buy Featured Link Now With 150 Search Engines Crawling The Network!

    How do I get guaranteed traffic? When someone signs up from your site, they must first click on your classified ad which will open a new window leading to your main website. They will have to wait a few seconds for the code to appear on a separate frame at the top of the screen reach millions free now!

    Blast Your Ad to Over 23,000 Opt-in Prospects at ShowMyLinks Submit Your Solo Email Ad to All Showmylinks Members GET YOUR TEXT LINK ADs LISTED 100% FREE FOR LIFE PLUS EARN MONEY TO YOUR PAYPAL!!

    Adult Store Empires Backlinks Resources Search Engine XXX!

    GET YOUR OWN MONEY-MAKING AD BOARD -- Integrating Text ad, Banner Ad and Email Ad into one Portal Make Money Fast With Your Paypal Reach Million Dollars In A Year Fast !

    Full Length Homemade Videos Watch real people's private home sex videos. Forget about those shitty 1-2 minute clips, these are all high quality full length videos! 40+ Bonus Sites You will also get full access to the entire reelpass network of sites which features over 40+ awesome movie sites, 1000's of movies and pictures to download! Download, Burn & Share Not only do you get to watch all our movies, you can also download every single one and save it forever, burn them to dvd or share with friends!!

    ReplyDelete

Thanks a lot for your valuable comments :)