eclipsis eclipsis - 7 months ago 18
Javascript Question

jQuery: Turn button filters into select menu options?

I'm using Lever's job listing API, but in its current form, it uses buttons to filter the jobs by category. How would I be able to turn the buttons into a complete select menu?

In the Fiddle, the options are "Business Dev", "Customer Success", so those would be examples of options in the select menu I want to create.

Fiddle.

HTML:

<section>
<div class="container" id="jobs-container">
<h1>Open jobs</h1>
<div class="jobs-teams">
</div>
<div class="jobs-list">
</div>
</div>
</section>


JS:

url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is unspecified
function cleanString(string) {
if (string) {
var cleanString = string.replace(/\s+/ig, "");
return cleanString;
}
else {
return "Uncategorized";
}
}

function nullCheck(string) {
if (!string) {
var result = 'Uncategorized'
return result;
}
else {
return string;
}
}

function createJobs(_data) {
for(i = 0; i < _data.length; i++) {

var team = nullCheck(_data[i].title)
var teamCleanString = cleanString(team);
$('#jobs-container .jobs-teams').append(
'<a href="#" class="btn '+teamCleanString+'">'+team+'</a>'
);
}

for(i = 0; i < _data.length; i++) {
for (j = 0; j < _data[i].postings.length; j ++) {
var posting = _data[i].postings[j]
var title = posting.text
var description = posting.description
//Making each job description shorter than 250 characters
var shortDescription = $.trim(description).substring(0, 250)
.replace('\n', ' ') + "...";
var location = nullCheck(posting.categories.location);
var locationCleanString = cleanString(location);
var commitment = nullCheck(posting.categories.commitment);
var commitmentCleanString = cleanString(commitment);
var team = nullCheck(posting.categories.team);
var teamCleanString = cleanString(team);
var link = posting.hostedUrl;

$('#jobs-container .jobs-list').append(
'<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
'<a class="job-title" href="'+link+'"">'+title+'</a>' +
'<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
'<p class="description">'+shortDescription+'</p>' +
'<a class="btn" href="'+link+'">Learn more</a>' +
'</div>'

);
}
}
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
$('.jobs-teams').on("click", "a", function(e) {
e.preventDefault();
for(i = 0; i < _data.length; i++) {
var teamRaw = _data[i].title;
var team = cleanString(teamRaw);
var jobs = $(".jobs-list");if ($(this).hasClass(team)) {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
jobs.find(".job").fadeIn("fast");
}
else {
$(".jobs-teams").find("a").removeClass("active");
$(this).addClass("active");
jobs.find("."+team).fadeIn("fast");
jobs.find(".job").not("."+team).fadeOut("fast");
}
}
}
})
}

//Fetching job postings from Lever's postings API
$.ajax({
dataType: "json",
url: url,
success: function(data){
createJobs(data);
activateButtons(data);
}
});

Answer

Updates I made are the following.

  • Added select tag on jobs-team
  • On the createJob()

    //get select element on the element with jobs-team css class
    $('#jobs-container .jobs-teams select').append(
       //append option.
       '<option value="" class=' + teamCleanString + '>' + team + '</option>'
    );}
    
  • On the activateButtons()

    //get selected option.
    if($(this).find(":selected").hasClass(team))
    

// Replace "leverdemo" with your own company name
url = 'https://api.lever.co/v0/postings/leverdemo?group=team&mode=json'

//Functions for checking if the variable is unspecified
function cleanString(string) {
  if (string) {
    var cleanString = string.replace(/\s+/ig, "");
    return cleanString;
  }
  else {
    return "Uncategorized";
  }
}

function nullCheck(string) {
  if (!string) {
    var result = 'Uncategorized'
    return result;
  }
  else { 
    return string;
  }
}

function createJobs(_data) {
  for(i = 0; i < _data.length; i++) {
    
    var team = nullCheck(_data[i].title)
    var teamCleanString = cleanString(team);
    $('#jobs-container .jobs-teams select').append(
    	'<option value="" class=' + teamCleanString + '>' + team + '</option>'
       );
  }
  //'<a href="#" class="btn '+teamCleanString+'">'++'</a>'

  for(i = 0; i < _data.length; i++) {
    for (j = 0; j < _data[i].postings.length; j ++) {
      var posting = _data[i].postings[j] 
      var title = posting.text
      var description = posting.description  
      //Making each job description shorter than 250 characters
      var shortDescription = $.trim(description).substring(0, 250)
      .replace('\n', ' ') + "...";
      var location = nullCheck(posting.categories.location);
      var locationCleanString = cleanString(location);
      var commitment = nullCheck(posting.categories.commitment);
      var commitmentCleanString = cleanString(commitment);
      var team = nullCheck(posting.categories.team);
      var teamCleanString = cleanString(team);
      var link = posting.hostedUrl;
    
    	$('#jobs-container .jobs-list').append(
      '<div class="job '+teamCleanString+' '+locationCleanString+' '+commitmentCleanString+'">' +
        '<a class="job-title" href="'+link+'"">'+title+'</a>' +
        '<p class="tags"><span>'+team+'</span><span>'+location+'</span><span>'+commitment+'</span></p>' +
        '<p class="description">'+shortDescription+'</p>' +
        '<a class="btn" href="'+link+'">Learn more</a>' +
      '</div>'  
    
      );
    }
  }
}

//Creating filter buttons for sorting your jobs
function activateButtons(_data){
  $('.jobs-teams select').on("change", function(e) {
  	e.preventDefault();
    for(i = 0; i < _data.length; i++) {
    	var teamRaw = _data[i].title;
      var team = cleanString(teamRaw);
      var jobs = $(".jobs-list");
      if ($(this).find(":selected").hasClass(team)) {
      	if ($(this).hasClass("active")) { 
          $(this).removeClass("active");
          jobs.find(".job").fadeIn("fast");
        }
        else {
          $(".jobs-teams").find("a").removeClass("active");
          $(this).addClass("active");
          jobs.find("."+team).fadeIn("fast");
          jobs.find(".job").not("."+team).fadeOut("fast");
        }
      } 
    }
  })
}

//Fetching job postings from Lever's postings API
$.ajax({
  dataType: "json",
  url: url,
  success: function(data){
  	createJobs(data);
    activateButtons(data);
  }
});
body {
  font-family: 'Lato', sans-serif;
  overflow-y: scroll;
}
  
p {
  margin: 0 0 1em 0;
  line-height: 1.4em;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
section {
  position: relative;
  padding: 30px;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.job {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 40px 30px;
}
h1 {
  font-size: 48px;
  color: #454545;
  padding: 0 30px;
}
.job-title {
  font-size: 24px;
  text-decoration: none;
  color: #454545;
}

.job-title:hover {
  color: #00A0DF; 
}

.tags span {
  color: #999;
  font-size: 12px;
  color: grayMediumDark;
}
.tags span:after {
  content: ', ';
}
.tags span:last-of-type:after {
  content: '';
}
.description {
  color: #999;
}
.btn {
  display: inline-block;
  padding: 7px 15px;
  text-decoration: none;
  font-weight: normal;
  color: #999;
  border: 2px solid #ebebeb;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #f9f9f9;
}
.btn:hover {
  background: #ebebeb;
  color: #555;
}
.btn.active {
  background: #454545;
  border-color: #454545;
  color: #fff;
}
.jobs-teams {
  margin-bottom: 40px;
  padding: 0 30px
}
.jobs-teams .btn {
  margin: 0 8px 8px 0;
}
.jobs-teams .btn:first-of-type {
  margin-left: 0;
}
.jobs-teams .btn:last-of-type {
  margin-right: 0;
}
<section>
  <div class="container" id="jobs-container">
    <h1>Open jobs</h1>
    <div class="jobs-teams">
      <select></select>
    </div>
    <div class="jobs-list">
    </div>
  </div>
</section>  

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>