Select2 Dropdown class

Select2 Single Select Example www.BryteStudio.com

by riaanc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="fonts.googleapis.com/css?family=Open+Sans"></script>
    <div class="selectRow" style="width:500px">
        <select id="singleSelectExample" style="width: 500px">
            <option></option><!-- Needed to show X image to clear the select -->
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>

CSS

body{
  font-family: "Open Sans";
}

.selectitem-row { display: flex; }
.selectitem-cell { flex: 1; }


.select2-result-repository { padding-top: 4px; padding-bottom: 3px; }
.select2-result-repository__avatar { float: left; width: 60px; margin-right: 10px; }
.select2-result-repository__avatar img { width: 100%; height: auto; border-radius: 2px; }
.select2-result-repository__meta { margin-left: 70px; }
.select2-result-repository__title { color: black; font-weight: bold; word-wrap: break-word; line-height: 1.1; margin-bottom: 4px; }
.select2-result-repository__forks, .select2-result-repository__stargazers { margin-right: 1em; }
.select2-result-repository__forks, .select2-result-repository__stargazers, .select2-result-repository__watchers { display: inline-block; color: #aaa; font-size: 11px; }
.select2-result-repository__description { font-size: 13px; color: #777; margin-top: 4px; }
.select2-results__option--highlighted .select2-result-repository__title { color: white; }
.select2-results__option--highlighted .select2-result-repository__forks, .select2-results__option--highlighted .select2-result-repository__stargazers, .select2-results__option--highlighted .select2-result-repository__description, .select2-results__option--highlighted .select2-result-repository__watchers { color: #c6dcef; }

JavaScript

//Require select2.FULL.js

$("#singleSelectExample").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    dropdownCssClass: "rcdropdown",
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatSelectItem, // omitted for brevity, see the source of this page
  templateSelection: formatSelectItemSelected // omitted for brevity, see the source of this page
});

    function formatSelectItem (dataItm) {
      if (dataItm.loading) return dataItm.text;
	
  		var markup = "";
			markup +=  '<div class="selectitem-row">';
      markup +=  '<div class="selectitem-cell"><img src="' + dataItm.owner.avatar_url + '"style="width: 60px"/></div>';
      markup +=  '<div class="selectitem-cell">'+dataItm.description+'</div>';
      markup +=  '<div class="selectitem-cell">'+dataItm.forks_count+'</div>';
      markup +=  '<div class="selectitem-cell">'+dataItm.stargazers_count+'</div>';
      markup +=  '<div class="selectitem-cell">'+dataItm.watchers_count+'</div>';
      markup += '</div>';
         

      return markup;
    }

    function formatSelectItemSelected (dataItm) {
      return dataItm.full_name || dataItm.text;
    }