This tutorial will explain how to create the job seraching portal using Indeed API with advanced search and autocomplete for seraching jobs and cities.
Create Indeed Publisher Account
Before starting our Indeed API tutorial, we have to have the publisher account and ID to use the Indeed api jobs. Create the Indeed publisher account. Once you created the account you will be having your publisher ID from this page https://ads.indeed.com/jobroll/xmlfeed
Let’s start our Indeed API tutorial
I used angular js to render the Job listing and find the folder structure below.
Follow the above folder structure to work this tutorial.
Let’s include all dependancy files in Index.html
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" /> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/blog-home.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="lib/bootstrap.min.js"></script> <script src="lib/angular.min.js"></script> <script src="lib/angular-ui-router.min.js"></script> <script src="js/main.js"></script> <script src="js/directives/navbar.js"></script> <script src="js/directives/search.js"></script> <script src="js/directives/aside.js"></script> <script src="js/directives/jobResult.js"></script> <script src="js/controller/main.js"></script> <script src="js/services/services.js"></script>
Include the html code inside <body></body> in index.html file
<nav-bar></nav-bar>
<!-- Page Content -->
<div class="container">
<search-box></search-box>
<div class="row">
<job-result></job-result>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
Open main.js from js folder
Copy the below code and past the code in main.js file
var app = angular.module('indeedApi', ['ui.router']);
Open main.js from js->controller folder
Copy the below code and past in main.js file
app.controller('mainController', function($scope, mainService, $location) {
$scope.pageSize = 20;
$scope.indeedData = [];
$scope.totalPages = "";
$scope.pages = [];
$scope.sortBy = (mainService.getParameterByName("sort") == "") ? "relevance" : mainService.getParameterByName("sort");
$scope.jt = (mainService.getParameterByName("jt") == "") ? "all" : mainService.getParameterByName("jt");
$scope.fromage = (mainService.getParameterByName("fromage") == "") ? "any" : mainService.getParameterByName("fromage");
$scope.radius = (mainService.getParameterByName("radius") == "") ? 25 : mainService.getParameterByName("radius");
$scope.removeParam = function(key, sourceURL) {
var rtn = sourceURL.split("?")[0],
param, params_arr = [],
queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
if (queryString !== "") {
params_arr = queryString.split("&");
for (var i = params_arr.length - 1; i >= 0; i -= 1) {
param = params_arr[i].split("=")[0];
if (param === key) {
params_arr.splice(i, 1);
}
}
rtn = rtn + "?" + params_arr.join("&");
};
return rtn;
};
var limit = mainService.getParameterByName("limit"),
page = parseInt(mainService.getParameterByName("page"));
$scope.limit = (limit == "") ? 10 : parseInt(limit);
$scope.jobname = mainService.getParameterByName("q");
$scope.location = mainService.getParameterByName("l");
$scope.page = (isFinite(page)) ? page : 1;
$scope.start = ($scope.page - 1) * $scope.limit;
$scope.end = $scope.start + $scope.limit;
mainService.indeedApiRequest($scope).then(function(data, $sce) {
$scope.indeedData = data.results;
GetPager(data.totalResults, $scope.page, $scope.pageSize)
});
var myObject = {
"q": $scope.jobname,
"l": $scope.location
};
$scope.curentUrl = $.param(myObject, true);
$scope.pagerUrl = $scope.removeParam("page", $location.absUrl());
var title = (($scope.jobname != '') ? $scope.jobname : "Jobs") + " " + (($scope.location != '') ? ("in " + $scope.location) : " Jobs") $scope.title = title;
function GetPager(totalItems, currentPage, pageSize) {
var pagination = "";
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
var active = "";
$scope.pages = pages;
$scope.currentPage = currentPage;
$scope.totalItems = totalItems;
$scope.totalPages = totalPages;
};
$scope.absUrl = $location.absUrl();
}).filter('to_trusted', ['$sce', function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
Open directive folder from js folder
Copy the below code and past to aside.js file. This file will show the indeed jobs filter options.
(function() {
app.directive("aSide", function() {
return {
templateUrl: "templates/aside.html",
link: function(elem, attrs) {}
}
});
})();
Copy the below code and past to jobResult.js. This file will list all Indeed API jobs.
(function() {
app.directive("jobResult", function() {
return {
templateUrl: "templates/home.html",
link: function(elem, attrs) {}
}
});
})();
Copy the below code and past to navbar.js. will show top navigation bar
(function() {
app.directive("navBar", function() {
return {
templateUrl: "templates/navigation.html",
link: function(elem, attrs) {}
}
});
})();
Copy the below code and past to search.js. The file will include search input box and input box will give jobs suggestion while user type the text in the input box and for cities it will give suggestion to select the city.
(function() {
app.directive("searchBox", function() {
return {
templateUrl: "templates/searchBox.html",
link: function(scope, elem, attrs) {
$(function() {
callAutocomplete("jobname", "what_ac");
callAutocomplete("location", "where_ac");
function callAutocomplete(id, find_what) {
var param;
if (find_what == "what_ac") param = "what=true&from=advancedsearch&tk=&cb=what_ac";
else if (find_what == "where_ac") param = "from=advancedsearch&tk=&cb=where_ac";
$("#" + id).autocomplete({
html: true,
source: function(request, response) {
$.ajax({
type: "POST",
url: "https://www.indeed.com/rpc/suggest?" + param,
dataType: 'jsonp',
jsonpCallback: find_what,
data: $.extend({
q: request.term
}, {}),
success: function(data) {
response(data[1]);
}
});
},
select: function(event, ui) {
var lable = ui.item.label;
$(this).val(lable.replace(/<\/?[^>]+(>|$)/g, ""));
return false;
},
focus: function(event, ui) {
var lable = ui.item.label;
$(this).val(lable.replace(/<\/?[^>]+(>|$)/g, ""));
return false;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
};
});
}
}
});
})();
Open js->services folder
Copy the below code and past to services.js file. This file will request to “jsonRequest.php” which will call the indeed api call to get all jobs based on the user selection. You will find the “jsonRequest.php” file functionality below.
(function() {
app.service('mainService', function($http, $q) {
var getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null) return "";
else return decodeURIComponent(results[1].replace(/\+/g, " "));
};
var video = $(location).attr('href').split('v=')[1];
var indeedApi = function(scope) {
var deferred = $q.defer();
$http({
url: 'jsonRequest.php',
method: "GET",
params: {
q: scope.jobname,
l: scope.location,
radius: 50,
limit: scope.limit,
sort: scope.sortBy,
co: "United States",
start: scope.start,
end: scope.end,
jt: scope.jt,
fromage: scope.fromage,
radius: scope.radius
}
}).then(function(response) {
deferred.resolve(response.data);
}, function(x) {
// Request error
});
return deferred.promise;
};
return {
"indeedApiRequest": indeedApi,
"getParameterByName": getParameterByName
}
});
})();
Open jsonRequest.php
Cope the below code and past to the php file. this file will call Indeed api request to get jobs listing
<?php
$q = $_GET['q'];
$l = $_GET['l'];
$limit = $_GET['limit'];
$end = $_GET['end'];
$start = $_GET['start'];
$sort = $_GET['sort'];
$jt = $_GET['jt'];
$fromage = $_GET['fromage'];
$radius = $_GET['radius'];
$data = array(
'publisher' => '7778623931867371',
'v' => 2,
'format' => 'json',
'q' => $_GET['q'],
'l' => $_GET['l'],
'jt' => $jt,
'fromage' => $fromage,
'limit' => $limit,
'start' => $start,
'end' => $end,
'radius' => $radius,
'sort' => $sort,
'highlight' => 1,
'filter' => 1,
'latlong' => 1,
'co' => 'United States'
);
$param = http_build_query($data) . "\n";
$url = 'http://api.indeed.com/ads/apisearch?' . $param;
//print($url);
header('Content-type: application/json');
$obj = file_get_contents($url, true);
echo $obj;
?>
Discussion about this post