jQuery Select2

<InputSelectList Class="form-control" ID="ddlSelect2" OptionCaptionColumn="text" OptionValueColumn="id">
  <DataLayer ID="dlProductName" Type="XMLFile" XMLFile="Data.northwind.xml" XPath="northwind/Products/Product">
    <FormattedColumn DataColumn="ProductID" Format="General Number" ID="id" />
    <FormattedColumn DataColumn="ProductName" Format="Standard" ID="text" />
    <SortFilter SortColumn="Caption" />
  </DataLayer>
</InputSelectList>

/*START INCLUDE SCRIPT ELEMENT...*/
$(document).ready(function() {
   $('#ddlSelect2').select2();
});
/*...END INCLUDE SCRIPT*/

<InputSelectList Class="form-control" ID="ddlMultiSelect" OptionCaptionColumn="text" OptionValueColumn="id" MultiSelect="True">
  <DataLayer ID="dlProductName" Type="XMLFile" XMLFile="Data.northwind.xml" XPath="northwind/Products/Product">
    <FormattedColumn DataColumn="ProductID" Format="General Number" ID="id" />
    <FormattedColumn DataColumn="ProductName" Format="Standard" ID="text" />
  </DataLayer>
</InputSelectList>

/*START INCLUDE SCRIPT ELEMENT...*/
$('#ddlMultiSelect').select2({
	tags: true,
	allowClear: true,
	tokenSeparators: [',', ' '],
	placeholder: {
	  id: '-1', 
	  text: 'Select an option'
	}
})
/*...END INCLUDE SCRIPT*/

<InputSelectList Class="form-control" ID="ddlData" OptionCaptionColumn="text" OptionValueColumn="id">
  <DataLayer Type="Static" ID="dlPlaceHolder" />
</InputSelectList>

/*START INCLUDE SCRIPT ELEMENT...*/
var data = [
   { id: -1, text: 'Select an option' }, 
   { id: 0, text: 'enhancement' }, 
   { id: 1, text: 'bug' }, 
   { id: 2, text: 'duplicate' }, 
   { id: 3, text: 'invalid' }, 
   { id: 4, text: 'wontfix' }
];
   
$('#ddlData').select2({
   data: data,
   placeholder: {
      id: '-1', 
      text: 'Select an option'
   }
})
/*...END INCLUDE SCRIPT*/

<InputSelectList ID="selPaginate" DefaultValue="[at]Request.selPaginate[tilde]" OptionCaptionColumn="full_name" OptionValueColumn="id">
  <DataLayer AcceptType="application/json" 
      ConnectionID="Repositories" 
      Type="REST" 
      UrlPath="https://api.github.com/repositories/[at]Request.selPaginate[tilde]" 
      XPath="//selPaginate" />
  <EventHandler DhtmlEvent="onchange" ID="actChange">
    <Action ElementID="dvRefresh" Type="RefreshElement" />
  </EventHandler>
</InputSelectList>

/*START INCLUDE SCRIPT ELEMENT...*/
$('#selPaginate').select2({
   ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1,
  templateResult: function(repo) {return repo.full_name || repo.text },
  templateSelection: function(repo) {return repo.full_name || repo.text }
});
/*...END INCLUDE SCRIPT*/