Select2 documentation for API parameters

Specific parameters can refer to: Parameters	Type	Describe
Width	String	Select2 container div for controlling width style properties
Minimuminputlength	Int	Minimum number of characters
Maximuminputlength	Int	Maximum number of characters
Minimumresultsforsearch	Int	Minimum number of results
Maximumselectionsize	Int	Maximum number of entries that can be selected
Placeholder	String	Select an initial value
Separator	String	delimiter character or string used to delimit ID
Allowclear	Boolean	This option specifies only placeholders
Multiple	Boolean	Select2 whether to allow multiple values to be selected
Openonenter		Open the drop-down if set to True when the user presses the ENTER key, Select2 closes. This option is enabled by default.
Id	Function	The function is used to get the key that the ID store represents from the Selection object or string ID
Matcher	Function	Used to determine whether a search term matches an option when using a built-in query function
Sortresults	Function	The results to be displayed before sorting the list search.
Formatselection	Function	function to render the current selection
FormatResult	Function	function to render the result,
Formatresultcssclass	Function	function to add CSS class result elements
Formatnomatches	string/function	The string contains a "mismatch" message, or function is used to render information
Formatsearching	string/function	String contains "search ... "Message, or The function is used to render the displayed message in the search.
Formatajaxerror	string/function	The string contains the message "Failed to load", or function is used to render information
Formatinputtooshort	string/function	String containing "search" input too short message, or function is used to render information.
Formatinputtoolong	string/function	String containing "search" input too short message, or function is used to render information
Formatinputtoolong	string/function	Contains the "Search input string too long" message, or function is used to render information.
Formatselectiontoobig	string/function	The string contains "You cannot select any more choices" message, or function is used to render information
Formatloadmore	string/function	string/function
Createsearchchoice	Function	Create a new optional selection from the user's search term. Allows creation of a select unavailable feature through a query. Useful users can create dynamic selections, such as "tags" usecase.
Createsearchchoiceposition	function/String	Defines the location of the Insert element
Initselection	Function	Call Select2 to create a value that allows the user to initialize the selected Select2 attached to the element
Tokenizer	Function	The token-giving function can be processed after inputting each keystroke and extracting and selecting selection of the input search box.
Tokenseparators	Function	A string array that defines the delimiter word breaker feature marked as the default. By default, this option is set to an empty array tag, which means that using the default compiler is disabled. It is usually wise to set this option to a value similar to [', ', '].
Query	Function	function is used to search for the query results of a word.
Ajax	Object	Select the built-in AJAX query feature. This object as a shortcut has to manually write a function that performs an AJAX request. Built-in functions support more advanced features, such as throttling and disorderly reactions.
Data	Arrays/Objects	Choose to build in the query function, using arrays.
Tags	Arrays/functions	Putting Select2 into "label" mode, users can add new selections and pre-existing tags by providing this option is an array of properties or a function that returns an array of objects or strings. If strings instead of objects are used, they will have a value string that is converted to an object ID and equal to the Text property.
Containercss	Functions/Objects	The inline CSS will be added to the Select2 container. An object that contains a CSS property/value key pair or a function that returns an object.
Containercssclass	function/String	The CSS class will be added to the label of the Select2 container.
Dropdowncss	Functions/Objects	The inline CSS will be added to the Select2 drop-down container. An object that contains a CSS property/value key pair or a function that returns an object.
Dropdowncssclass	function/String	The CSS class will be added to the Select2 drop-down container.
Dropdownautowidth	Boolean	When set to true try the auto-size drop-down based on the width of the content.
Adaptcontainercssclass	Function	Filter/rename CSS classes as they are copied from the source Label Select2 Container label
Adaptdropdowncssclass	Function	Filter/Rename CSS class as they are copied from Source tab SELECT2 pull label
Escapemarkup	Function	The function is used to post-process markup from the formatter to return functionality. By default, this feature escapes HTML entities to prevent JavaScript injection.
Selectonblur	Boolean	Set to True if you want Select2 to select the current highlighting option when blurring.
Loadmorepadding	Integer	Defines how many pixels you need to load the next page before folding the following. The default value is 0, which means that the result list needs to scroll to the bottom of the next page to load the results. This option can be used to trigger faster loading and may result in a smoother user experience.
Nextsearchterm	Function	function to determine what the next search term should be

Example Code (for the target element for Div For example: <div id= "E1" >...</div>)

2. $ ("#e1"). Select2 ();
4. $ ("#e1"). Click (function () {alert ("Selected value is:" +$ ("#e1"). Select2 ("Val");}); Gets the selected ID value
6. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Val", "CA");}); Id= "CA" is selected (as if the individual is not working as an array)
8. $ ("#el"). Click (function () {$ ("#e2"). Select2 ("Val", "");}); Do not select any values
10. $ ("#e1"). Click (function () {var data = $ ("#e2"). Select2 ("Data");}); Get the selected object
12. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Data", {ID: "CA", Text: "California"});
14. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Open");}); Open the drop-down box
16. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Close");}); Close the drop-down box
18. $ ("#e1"). Select2 ({placeholder: "Select a State"}); drop-down box hint
20. $ ("#e1"). Click (function () {alert ("Selected value is:" +$ ("#e2"). Select2 ("Val");}); Gets the selected ID value
22. $ ("#e1"). Click (function () {$ ("#e8_2"). Select2 ("Val", ["CA", "MA"]);}); Id= "CA", id= "MA" selected
24. $ ("#e12"). Click (function () {alert ("Selected value is:" +json.stringify ($ ("#e2"). Select2 ("Data")); /Get selected JSON object
26. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Data", [{ID: "CA", Text: "California"},{id: "MA", Text: "Massachusetts"}] ); });

Load Data $ ("#e11"). Select2 ({

placeholder: "Select report Type", Allowclear:true,data: [{id:0, Text: ' Story '},{id:1, Text: ' Bug '},{id:2, text: ' Task '}]

});//load array support multiple Select $ ("#e11_2"). Select2 ({

createsearchchoice:function (term, data) {if (the data). Filter (function () {return this.text.localeCompare (term) = = = = 0; }). {length===0) {return {id:term, text:term};}},multiple:true,data: [{id:0, Text: ' Story '},{id:1, Text: ' Bug '},{id:2, Text: ' Task '}]

});
function log (e) {

var e=$ ("<li>" +e+ "</li>"); $ ("#events_11"). Append (e); E.animate ({opacity:1}, 10000, ' linear ', function () {e.animate ({opacity:0}, +, ' linear ', function () {e.remove ();});});

}//Event Registration for an element $ ("#e11")
. On (' Change ', function (e) {log ("change" +json.stringify ({val:e.val, added:e.added, removed:e.removed})) Change events
. On ("Select2-opening", function () {log ("opening");}) Select2 Events in Open
. On ("Select2-open", function () {log ("Open");}) Select2 Open Event
. On ("Select2-close", function () {log ("Close");}) Select2 Shutdown Events
. On ("Select2-highlight", function (e) {log ("highlighted val=" + e.val+ "choice=" + json.stringify (E.choice));}) Highlight
. On ("Select2-selecting", function (e) {log ("selecting val=" + e.val+ "choice=" + json.stringify (E.choice));}) Check Events
. On ("Select2-removing", function (e) {log ("removing val=" + e.val+ "choice=" + json.stringify (E.choice));}) removing events in
. On ("Select2-removed", function (e) {log ("removed val=" + e.val+ "choice=" + json.stringify (E.choice));}) Removal Complete Event
. On ("select2-loaded", function (e) {log ("Loaded (data property omitted for brevity)") Events in Load
. On ("Select2-focus", function (e) {log ("Focus");}) Get Focus Event
. On ("Select2-blur", function (e) {log ("blur");}); Lost Focus Event

$ ("#e11"). Click (function () {$ ("#e11"). Val (["AK", "CO"]). Trigger ("Change");});

The Official document address is: http://select2.github.io/select2/#documentation. It is useless to say more, and finally we have an example to prove that the AJAX request remote data, the quasi:

Select2 documentation for API parameters