select2 ajax

by salt

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="container">
  <div class="row clearfix">
    <select class="js-data-example-ajax form-control" multiple>
     
    </select>
  </div>
</div>

CSS

@charset "UTF-8";
.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;
}

.s2-docs-sidebar.affix {
  position: static;
}

@media (min-width: 768px) {
  .s2-docs-sidebar {
    padding-left: 20px;
  }
}

.s2-docs-sidenav {
  margin-top: 20px;
  margin-bottom: 20px;
}

.s2-docs-sidebar .nav > li > a {
  margin-left: -1px;
  display: block;
  padding: 4px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #767676;
  border-left: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.s2-docs-sidebar .nav > li > a code {
  background-color: inherit;
  color: inherit;
}

.s2-docs-sidebar .nav > li > a:hover,
.s2-docs-sidebar .nav > li > a:focus {
  color: #428BCA;
  text-decoration: none;
  background-color: transparent;
  border-left-color: #428BCA;
}

.s2-docs-sidebar...

JavaScript

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",//"https://www.sportivepeople.com/Utilities/Features/CategorySearch", 
    //type: "post",
    dataType: 'json',
    delay: 0,
    data: function(params) {
      return {
        q: params.term,
        page: params.page
        /*AdvancedFilter: "",
        CategoryBranchId: "-1",
        CategoryDomainId: "1",
        CategoryGroupId: "-1",
        CategoryMainBranchId: "-2",
        CategoryMainDomainId: "1",
        CategoryMainRootId: "3",
        CategoryRootId: "-1",
        CategorySubBranchId: "-1",
        CategorySubGroupId: "-1",
        CurrentPage: "1",
        Keyword: " ",
        LanguageId: "45",
        PageSize: "1000",
        SearchType: "1-1-3-11-95-979",
        SearchTypeSubFilter: "autocomplete",
        SortByDirection: "Asc",
        SortByField: "relevance"*/
      };
   ...