Welcome to TechYari!

Tutorials on webdesign, web development and more...

Search App using Freebase.Com API with jQuery and Ajax

By  TechYari     7/03/2014    Labels:,,,,,, 
Today we are going to look at another API called . Freebase has community driven database of people, places, things and much more. We will create a simple search app with jQuery and Ajax. Our app will auto suggest things using API, jQuery and Ajax when a user types more than 3 characters in search box. Each auto suggested link will contain it's category (As there can be many different items with same name ) and a hidden page url of for that topic. If a user clicks on an our app will show a box dynamically below the search box using jQuery. In addition it will also hide the box if you delete the searched item or press back key on your keyboard.
Requirements :  This tutorial requires following libraries to work :
  • jQuery 
  • jQuery UI ( for Ajax and autosuggest )

Scenario 1 : Our Home Page

Scenario 2: Dropdown with auto suggest using jQuery when user searches for something

Scenario 3 : Result with a link to for the selected item.

Download Source  Demo

Kindly include jQuery and jQuery UI properly before starting with the code of the tutorial. Download the source code if you have nay doubts.

<div class="search-container">
                <h3>What are you looking for :</h3>
                <div class="search">
                <input class="search-box" id="search-box" name="search-input" onkeyup='check()' placeholder="Enter anything here"/>
<div class="result">


<style type="text/css">
       body{background: rgba(167, 166, 166, 0.22);}
            width: 520px;
            text-align: center;
            padding: 20px;
            margin: auto;
            color: gray;
            background: white;
            -webkit-box-shadow: 5px 5px 25px 0px rgba(46, 50, 50, 0.56);
-moz-box-shadow:    5px 5px 25px 0px rgba(46, 50, 50, 0.56);
box-shadow:         5px 5px 25px 0px rgba(46, 50, 50, 0.56);


        margin: auto;
        width: 500px;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
        background: rgb(246, 247, 242);
        padding: 31px;
        display: none;
          -webkit-box-shadow: 5px 5px 25px 0px rgba(46, 50, 50, 0.56);
-moz-box-shadow:    5px 5px 25px 0px rgba(46, 50, 50, 0.56);
box-shadow:         5px 5px 25px 0px rgba(46, 50, 50, 0.56);

      .result a{text-decoration: none;font-size: 20px;color: gray}

      .search-box{width: 500px;padding: 5px 10px;
                  border: 1px solid rgb(152, 187, 211);
                  height: 25px;
                  -webkit-box-shadow: inset 2px 1px 25px 0px rgba(109, 132, 180, 0.22);
-moz-box-shadow:    inset 2px 1px 25px 0px rgba(109, 132, 180, 0.22);
box-shadow:         inset 2px 1px 25px 0px rgba(109, 132, 180, 0.22);
      footer{text-align: center;margin-top: 300px}          

<script type="text/javascript">
        function check(){
        var value=$.trim($("#search-box").val());

<script type="text/javascript">

 // populating the dropdown list using autocomplete with freebase api 
$( "#search-box" ).autocomplete({
      source: function( request, response ) {
          url: "",
          dataType: "json",
          data: {
            query: request.term,
          success: function(data) {
            // Fix for IE 8 as forEach function not supported yet below IE 9
        if (typeof Array.prototype.forEach != 'function') {
         Array.prototype.forEach = function(callback){
           for (var i = 0; i < this.length; i++){
             callback.apply(this, [this[i], i, this]);
            var parsed = data.result;
             var newArray = new Array(parsed.length);
             var i = 0;
              parsed.forEach(function (entry) {
                     var category="Not Available";
                     if(entry.notable){category =;}
                     var newObject = {
                         label: " (" + category + ")",
                     newArray[i] = newObject;

      minLength: 3,
      select: function( event, ui ) {
        /*Get the item's mid and create a freebase link for the item  */
        $('.result').html('<a href='+ui.item.mid+' target="_blank">Click here to know more about <span style="color:rgb(53, 179, 219)">'+ui.item.label+'</span></a>');

      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );


You can download the source code of this tutorial if you get into any trouble using this link.

Kindly share this if you like it. Comment below for queries and suggestions. Happy Coding :)

About TechYari

A web developer, blogger, amateur designer and an open source enthusiast.

No comments:

Post a comment

Contact form


Email *

Message *


Follow TechYari on


About TechYari

Tech Yari is a Technical Blog featuring articles on Web Development, Web Design, Search Engine Optimization, Social Media Marketting and Programming.