jQuery toggleClass example

Toggle class name on click in jQuery

by mkilmanas

HTML

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div>
  <select id="githubSearch">
  </select>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('#githubSearch').select2({
    width: '500px',
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        cache: false,
        data: function (params) {
            return {
            		q: params.term,
                searchKey: params.term
            };
        },
        processResults: function (data, params) {
            $.each(data.items, function(index, item) {
                var newOption = new Option(item.id, item.name, false, false);
                $('#githubSearch').append(newOption).trigger('change');
            });
            console.log($('#githubSearch').find('option').length);
        }
    },
    placeholder: 'Seach in GitHub ...',
    minimumInputLength: 3
});