Example - Build an autocomplete search widget for music tracks


We will build a powerful autocomplete based music search widget using AaaS. As user types, it shows the tracks whose title match. It also shows the artists, track duration, rating, genre and an image of album. User can search tracks by genre as well.

Before we show how to build, lets take a look at it how the widget look like

Search tracks

Type track title e.g. 'Best' or 'Love' or just type 'wh'


Search tracks by genre

(Select a genre below and search in the box above)

Now lets see how to build this using AaaS.

Add data

We first need to add the data to Service through API. The data contains track title, artist, duration, rating and location of the image of the album. For the demo, we have collected track title and other details of 200 tracks. You can view the data here

In AaaS, data is added in the form of records. Each record has a title and optional metadata about it. In this case we can add each track as a record where title of the track is recordís title and other details (duration, artists, rating, genre and image location) are metadata about the record.

While creating records, you can tag them as well. This helps you apply filter to searches. Like how we are searching tracks by genre above.

Lets add the data using AaaS API. API has methods for adding, deleting, searching the data. Following code snippet adds a track and its other details using curl.

$ curl https://api.aaas.io/v1/add  \
-d application_id={your_application_id} \
-d "title=Nothing Was The Same" \
-d "utils={\"genre\":\"country\",\"image_url\":\"/static/images/music/1.jpg\",\"length\":4.23,\"rating\":2,\"artist\":\"Coldplay\"}" \
-u {your_application_id}:{your_app_key} \

curl uses the -u flag to pass basic auth credentials

Similar way we can add data about other tracks as well.


Search data

Now that we have added data, lets see how to search it and create autocomplete search widget.

AaaS API provides search method to query records. The search method has following url

GET https://api.aaas.io/v1/search

Search API call would return records whose title match the query. The metadata part of the record is not matched. Search response contains the title and metadata of records. The output is structured as JSON array.

It takes 3 parameters -- term, application_id, tags (Optional)
The text to be searched is passed as 'term'

For example -- To list all tracks whose title match word 'super'

https://api.aaas.io/v1/search?application_id=4a1f8a04&term=super
This returns the track name and other metadata as JSON array shown below

[
    {
        "title": "Super Hits",
        "utils": {
            "genre": "pop",
            "image_url": "/static/images/music/196.jpg",
            "length": 5.29,
            "rating": 4,
            "artist": "WillieNelson"
        }
    },
    {
        "title": "Supernova",
        "utils": {
            "genre": "hip-hop",
            "image_url": "/static/images/music/47.jpg",
            "length": 7.11,
            "rating": 3,
            "artist": "RayLaMontagne"
        }
    },
    {
        "title": "Supermodel",
        "utils": {
            "genre": "pop",
            "image_url": "/static/images/music/164.jpg",
            "length": 4.8,
            "rating": 2,
            "artist": "FosterThePeople"
        }
    }
]

Add tags to above query to list tracks with genre 'pop'

https://api.aaas.io/v1/search?application_id=4a1f8a04&term=super&tags=genre:pop

Usually the search URL is specified as autocomplete search box's service URL. Hence it is GET method and by-default does not need authentication. However authentication for search methods can be enabled from dashboard.


Build the autocomplete search widget UI

Lets build the autocomplete search widget UI using jQuery UI autocomplete. The integration with jQuery UI autocomplete is quite easy. All you have to do is to specify the search method URL as the data source for autocomplete.

If you are not familiar with jQuery UI autocomplete, please see a quick overview here

Following code snippet shows the UI code. We specifid the search method URL as data source.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>    
$(function() {   
    $( "#demo-search-box" ).autocomplete({
          delay: 0,
          minLength: 3,           
          source: function(request, response) {
          $.ajax({
          url: 'https://api.aaas.io/v1/search?application_id={your_application_id}', // ? url to get data
          data: { term: request.term }, 
          success: function(data) {               
          response($.map(data, function(item) {
              return {label: item.title};  // ? Map the title in the response as label
          }));
          }
        });
      }
    })
});
</script>
<input id="demo-search-box" />

This shows the title of the tracks as you type. It is shown below. (Type tiles e.g. 'wh' or 'best')

This shows only the title of the track in search results. The metadata (track duration, artists, image etc) can also be added to the search results with little more javascript code.

The complete source code and css can be viewed here


What else can you build?

You can build various things. For example a location service, a people name search app, autocomplete search widget for book store.

This demo does not show every feature of the service. There are more things you can do. For example you can organize records in various sections and create more powerful searches with filters. Do read the documentation to know what more you can do with the service.