Select2 testing template

In this example below you will see how to do a Select2 testing template with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sebastienb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sebastienb ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Select2 testing template</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /><link rel="stylesheet" href="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />

<link rel="stylesheet" media="all" href="https://octopi-tos-herokuapp-com.global.ssl.fastly.net/assets/application-53624a8ca1ff28c18245edbd1aeb00d5.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<body data-page-title="pre-gate-in" id="octopi">
  <div class="container" style="margin-top:20px;">
  <div class="row">
    <div class="col-sm-12">
      <h2>Truck</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <select name="" id=""></select>
    </div>
  </div>
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sebastienb/select2-testing-template-MvXrZP */
.truck-text .truck-number {
  font-weight: bold;
}
.truck-text .truck-license-plate {
  text-transform: upercase;
  font-weight: bold;
}
.truck-text .truck-color {
  border-radius: 50px;
  margin-top: .2em;
  display: inline-block;
  height: 1em;
  width: 1em;
  float: right;
  margin-right: .5em;
  background: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.truck-text .truck-color.red {
  background: red;
}
.truck-text .truck-color.blue {
  background: blue;
}
.truck-text .truck-color.green {
  background: green;
}

.truck-result-item {
  border-bottom: 1px #dddddd solid;
}
.truck-result-item .truck-number {
  font-weight: bold;
}
.truck-result-item .truck-license-plate {
  text-transform: upercase;
  font-weight: bold;
}
.truck-result-item .truck-color {
  display: inline-block;
  height: 1em;
  width: 1em;
  float: right;
  border-radius: 50px;
  background: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}


/*Downloaded from https://www.codeseek.co/sebastienb/select2-testing-template-MvXrZP */
var data = [{
  id:-1,
  text:'Enter truck information'
},{
  id: 2,
  text: '<div class="truck-text"><span class="truck-number">#337</span> <span class="truck-company">Martainer</span> <span class="truck-license-plate">EPES37</span><span class="truck-color" style="background-color: red;"></span></div>',
  html: '<div class="truck-result-item"><span class="truck-number">#337</span> <span class="truck-company">Martainer</span> <span class="truck-license-plate">EPES37</span><span class="truck-color" style="background-color: red;"></span></div>',
  title: 'Martainer 337'
},{
  id: 1,
  text: '<div class="truck-text"><span class="truck-number">#337</span> <span class="truck-company">Delta</span> <span class="truck-license-plate">ROTD37</span><span class="truck-color" style="background-color: blue;"></span></div>',
  html: '<div class="truck-result-item"><span class="truck-number">#337</span> <span class="truck-company">Delta</span> <span class="truck-license-plate">ROTD37</span><span class="truck-color" style="background-color: blue;"></span></div>',
  title: 'Delta 337'
},,{
  id: 3,
  text: '<div class="truck-text"><span class="truck-number">#24</span> <span class="truck-company">Martainer</span> <span class="truck-license-plate">CDF45T</span><span class="truck-color" style="background-color: green;"></span></div>',
  html: '<div class="truck-result-item"><span class="truck-number">#24</span> <span class="truck-company">Martainer</span> <span class="truck-license-plate">CDF45T</span><span class="truck-color" style="background-color: green;"></span></div>',
  title: 'Martiner 24'
}
           ];

$("select").select2({
  data: data,
  placeholder: 'Please enter truck information',
  allowClear: true,
  escapeMarkup: function(markup) {
    return markup;
  },
  templateResult: function(data) {
    return data.html;
  },
  templateSelection: function(data) {
    return data.text;
  },
  theme: "bootstrap"
})

Comments