jQuery addClass example

Change class name on click in jQuery

by Peter Johnson

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<div class="field">
  <p class="control has-icons-left">
    <input id="searchbox" class="input" type="text" placeholder="autocomplete">
    <span class="icon is-small is-left">
      <i class="fas fa-search"></i>
    </span>
  </p>
</div>

<div class="column">
  <h3 class="subtitle">master</h3>
  <ul id="pane-1" class="pane" />
</div>
<div class="column">
  <h3 class="subtitle">pelias parser</h3>
  <ul id="pane-2" class="pane" />
</div>

CSS

body {
  padding:5px; 
}
.column {
  border: 0;
  margin: 0;
  display: block;
  float: left;
  width: 50%;
}
.pane {
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 12px;
  list-style: none;
  padding: 0;
}
.pane li {
  display:block;
  color:#000000;
  line-height:30px;
  border-bottom: solid 1px #CCCCCC;
  padding:0 10px;
  cursor: pointer;
}
.pane li:hover {
  color:#FFFFFF;
  font-weight: bold;
  background-color: lightblue;
}

JavaScript

// find elements
var input = $("#searchbox");
var control = $(".control");
var prod = $("#pane-1");
var dev = $("#pane-2");

input.on('keyup', function() {
	var query = {
    text: input.val(),
    layers: 'address,street,neighbourhood,borough,localadmin,locality,county,macrocounty,region,macroregion,country,postalcode',
    api_key: 'ge-2a93439530ce0cc2'
  }
  
  control.addClass('is-loading');
  var completed = 0
  var complete = function(){
  	completed++;
    if( completed >= 2 ){
    	control.removeClass('is-loading');
    }
  }

  // prod
  request({
  	domain: 'api.geocode.earth',
  	query: query
  }, function( err, data ){
    displayResults( data, prod );
    complete();
  });
  
  // dev
  request({
  	domain: 'api.dev.geocode.earth',
  	query: query
  }, function( err, data ){
    displayResults( data, dev );
    complete();
  });

});

var request = function(opts, cb){

  var scheme = opts.scheme || 'https'
  var domain = opts.domain || 'api.geocode.earth'
  var path = opts.path || '/v1/autocomplete'
  var query = opts.query || {}

  $.ajax({
    url: scheme + "://" + domain + path,
    method: "GET",
    dataType: "json",
    data: query,
    success: function( data, status, jqxhr ){
      console.log( "Request received:", data );
      cb( null, data );
    },
    error: function( jqxhr, status, error ){
      console.log( "Something went wrong!" );
      cb( error );
    }
  });
}

function displayResults( data, pane ){
  pane.empty();
  data.features.forEach(function(feat){
    var label = feat.properties.label;
    pane.append('<li>'+label+'</li>');
  });
};