Indeed API Job Search Version 2 integration using Jquery JSON ajax call and pagination implemented

W3 Tweaks did the tutorial and demo using indeed job search version 2 API using jquery ajax call. In this tutorial below items are covered.

1. Instant job search using AJAX call.
2. Indeed jobs shown in pagination.
3. Jobs shown instantly when pagination like clicked.
4. Jobs shown based on country (This will help for publishers earning).
5. Find more jobs – Navigate to indeed web site with user selected location and job query.

Before starting our tutorial make sure you have your Indeed publisher account. Find the like to create the publisher account.

Here we go. We can start our tweaks for Indeed job search API v2.

Include Jquery Plugin inside header

<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>

HTML Code

Below code will hold the Job search input box, search button, job results and pagination element.

<input class="jobname" id="jobname" type="text" value="" name="jobname">
<input class="location" id="location" type="text" value="" name="location">
<input type="submit" id="searchResult" value="Find Jobs" class="">
<!—Job result element -->
<div id="jobs-data"></div>
<div style="clear:both;"></div>
<!—Pagination element -->
<div id="pagination"></div>

JavaScript Code for finding country

Below code will call one of the IP address api call using AJAX request

var location, country, limit = 10;
$.get("http://ip-api.com/json/", function(response) {
    country = response.country;
}, "jsonp");

“Find more jobs” button click event code below

$("#searchResult").click(function() {
    jobSearch($('#location').val(), $('#jobname').val(), country, 0, limit);
});

Pagination link click code below

var resultLinks = $('body').find('#pagination');
resultLinks.on('click', 'li', function(e) {
    var start = ($(this).text() - 1) * limit,
        end = start + limit;
    jobSearch($('#location').val(), $('#jobname').val(), country, start, end);
});

Below “extractDomain” function will extract current location indeed url for “find more jobs” link

 function extractDomain(url) {
     var domain;
     //find & remove protocol (http, ftp, etc.) and get domain 
     if (url.indexOf("://") > -1) {
         domain = url.split('/')[2];
     } else {
         domain = url.split('/')[0];
     }
     //find & remove port number  
     domain = domain.split(':')[0];
     return domain;
 };

Below function will render the indeed job data’s, find more jobs link and pagination

 function jobSearch(location, data, country, start, end) {
     var serachData = data;
     $.ajax({
         cache: false,
         data: $.extend({
             publisher: “API_KEY”,
             v: '2',
             format: 'json',
             q: data,
             l: location,
             radius: 50,
             limit: limit,
             sort: 'date',
             highlight: 1,
             filter: 1,
             latlong: 1,
             co: country.toLowerCase(),
             userip: '',
             useragent: ''
         }, {
             start: start,
             end: end
         }),
         dataType: 'jsonp',
         type: 'GET',
         timeout: 5000,
         url: 'http://api.indeed.com/ads/apisearch'
     }).done(function(data) {
         var result = "",
             pagination = "",
             i = 2,
             style, url, paginationLimit = Math.ceil((data.totalResults) / limit);
         $.each(data.results, function(i, item) {
             style = ((i % 2) == 0) ? "articaljoblistinggray" : "articaljoblistingwhite"
             result = result + '<a target="_blank" href="' + item.url + '"><li class="articaljoblisting ' + style + '" style="margin-bottom:3px;">' + item.jobtitle + '<br /><span style="color:black;">' + item.source + ' - ' + item.formattedLocation + '</span></li></a>';
             i++;
             // Get current location indeed url  
             url = item.url;
         });
         for (i = 1; i <= paginationLimit; i++) {
             pagination = pagination + '<li>' + i + '</li>';
         }
         $('#jobs-data').html('<ul style="list-style: none;margin: 0;padding:0;">' + result + '</ul>  ;<a style="float: right;" target="_blank" href="http://' + extractDomain(url) + '/jobs?q=' + serachData + '&l=' + location + '">Find more jobs</a>');
         $('#pagination').html('<ul class="pagination" style="list-style: none;margin: 0;padding:0;">' + pagination + '</ul>');
     });
 };

In above function the parameters (country, data, country, start, end) will help to fetch the data from indeed api url. $.each will parse all the data’s and store the data’s in “result” variable. Below code will construct the pagination URL and store the links in “pagination” variable.

for (i = 1; i <= paginationLimit; i++) {
    pagination = pagination + '<li>' + i + '</li>';
}

Below code will print the data’s, find more and pagination link

 $('#jobs-data').html('<ul style="list-style: none;margin: 0;padding:0;">' + result + '</ul><a style="float: right;" target="_blank" href="http://' + extractDomain(url) + '/jobs?q=' + serachData + '&l=' + location + '">Find more jobs</a>');
 $('#pagination').html('<ul class="pagination" style="list-style: none;margin: 0;padding:0;">' + pagination + '</ul>');

If you like the tutorial and demo please like and share the page.

Note: Replace API_KEY with your Indeed API Key

Download Demo