Select2
Easy Deploy
  1. Introduction
  2. Installation
  3. Usage
Introduction

Welcome to the Select2 Easy Deploy user guide! This guide will walk you through the installation and usage of our Select2 extension. With Select2 Easy Deploy, you can streamline the deployment process for Select2 fields on your website and take advantage of a range of powerful customization tools.
Whether you're new to Select2 or an experienced user, this guide will help you get the most out of our extension.
Let's get started!

Features
This Plugin comes with an auto deploy for all select elements in a page with the class "select2-select" by executing the function "buildSelect2" onReady event. You can deploy the following data-target to a select object to customize your deploy:
  • data-dropdown-auto-width attribute
    Detach its dropdown box from its select2 field width, it becomes useful when the select2 container is smaller then the width of its search contents
    With data-dropdown-auto-width="0"
    Example Code: 
    <select class="select2-select" data-dropdown-auto-width="0">
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-dropdown-auto-width="1"
    Example Code: 
    <select class="select2-select" data-dropdown-auto-width="1">
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • multiple attribute
    Description
    Example Code: 
    <select class="select2-select" multiple>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-disable-search-filter-by-pressing-enter-while-focused attribute
    Description
    With data-disable-search-filter-by-pressing-enter-while-focused="0"
    Example Code: 
    <select class="select2-select" data-disable-search-filter-by-pressing-enter-while-focused="0">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-disable-search-filter-by-pressing-enter-while-focused="1"
    Example Code: 
    <select class="select2-select" data-disable-search-filter-by-pressing-enter-while-focused="1" data-auxiliar-absolute-div-position="left">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-disable-search-filter-by-pressing-enter-while-focused attribute
    Description
    With data-create-auxiliar-absolute-div-based-on-this-class=".divExample" and
    data-auxiliar-absolute-div-position="left"
    Example Code: 
    <select class="select2-select" data-disable-search-filter-by-pressing-enter-while-focused="0">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-placeholder attribute
    Description
    Without data-placeholder
    Example Code: 
    <select class="select2-select">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-placeholder="Select a cool item"
    Example Code: 
    <select class="select2-select" data-placeholder="Select a cool item">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-pre-informed attribute
    Description
    With data-pre-informed
    Example Code: 
    <select class="select2-select" id="select2DataPreInformed">
</select>
<script>
	var dataPreInformed = [
		{
			id: 0,
			text: 'CrazyImage1',
			html: '<img src="https://www.publicdomainpictures.net/pictures/90000/t2/tybee-island-lighthouse-1403954573RxH.jpg" height="50" width="50">Image 1'
		},
		{
			id: 1,
			text: 'CrazyImage2',
			html: '<img src="https://www.publicdomainpictures.net/pictures/200000/t2/crystal-ball-on-the-bench-1478611361Iod.jpg" height="50" width="50">Image 2'
		},
		{
			id: 2,
			text: 'CrazyImage3',
			html: '<img src="https://www.publicdomainpictures.net/pictures/210000/t2/elephant-sunset-silhouette.jpg" height="50" width="50">Image 3'
		}
	];
	$("#select2DataPreInformed").data("pre-informed", dataPreInformed);
</script>
    Visual Example:
  • data-force-position attribute
    Description
    With data-force-position="above"
    Example Code: 
    <select class="select2-select" data-force-position="above">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-force-position="below"
    Example Code: 
    <select class="select2-select" data-force-position="below">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-classes attribute
    Description
    With data-classes="bg-warning border-danger"
    Example Code: 
    <select class="select2-select" data-classes="bg-warning border-danger">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-small attribute
    Description
    With data-small="1"
    Example Code: 
    <select class="select2-select" data-small="1">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-value attribute
    Description
    With data-value="3"
    Example Code: 
    <select class="select2-select" data-value="3">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
  • data-ajax-link attribute
    Description
    With data-ajax-link="https://jaderloki.github.io/select2-easy-deploy/ajaxData.json"
    Example Code: 
    <select class="select2-select" data-ajax-link="https://jaderloki.github.io/select2-easy-deploy/ajaxData.json">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-name-parameter="ajaxGetData"
    Example Code: 
    <select class="select2-select" data-ajax-link="https://jaderloki.github.io/select2-easy-deploy/ajaxData.json" data-name-parameter="ajaxGetData">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example:
    With data-extra-params
    Example Code: 
    <select class="select2-select" data-ajax-link="https://jaderloki.github.io/select2-easy-deploy/ajaxData.json" data-name-parameter="ajaxGetData">
	<option disabled selected value="">Select an Item</option>
	<option value="1">Option One</option>
	<option value="2">Option Two</option>
	<option value="3">Option Three</option>
</select>
    Visual Example: