JSFiddle - React, Tailwind, and code Playground

by biggAye

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<select id="testSelect"></select>

CSS

select{
  width: 200px;
}

JavaScript

var data = [{
    "Id": -1,
    "Descripcion": "Todos"
  },
  {
    "Id": 7,
    "Descripcion": "Amtas"
  },
  {
    "Id": 1,
    "Descripcion": "Comtrek"
  },
  {
    "Id": 8,
    "Descripcion": "Earthwax"
  },
  {
    "Id": 2,
    "Descripcion": "Flotonic"
  },
  {
    "Id": 9,
    "Descripcion": "Memora"
  },
  {
    "Id": 5,
    "Descripcion": "Printspan"
  },
  {
    "Id": 3,
    "Descripcion": "Rodeomad"
  },
  {
    "Id": 6,
    "Descripcion": "Terragen"
  },
  {
    "Id": 4,
    "Descripcion": "Thredz"
  }
];

var currentSortId = 0;
$.each(data, function(i, v) {
  currentSortId = currentSortId + 1; // First ID is 1!
  v.sId = currentSortId;
});

console.log(data);

$('#testSelect').selectize({
  maxItems: 1,
  valueField: 'Id',
  labelField: 'Descripcion',
  searchField: 'Descripcion',
  sortField: 'sId',
  options: data
});