Select2 documentation for API parameters

Source: Internet
Author: User

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>)
  1. $ ("#e1"). Select2 ();
  2. $ ("#e1"). Click (function () {alert ("Selected value is:" +$ ("#e1"). Select2 ("Val");}); Gets the selected ID value
  3. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Val", "CA");}); Id= "CA" is selected (as if the individual is not working as an array)
  4. $ ("#el"). Click (function () {$ ("#e2"). Select2 ("Val", "");}); Do not select any values
  5. $ ("#e1"). Click (function () {var data = $ ("#e2"). Select2 ("Data");}); Get the selected object
  6. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Data", {ID: "CA", Text: "California"});
  7. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Open");}); Open the drop-down box
  8. $ ("#e1"). Click (function () {$ ("#e2"). Select2 ("Close");}); Close the drop-down box
  9. $ ("#e1"). Select2 ({placeholder: "Select a State"}); drop-down box hint
  10. $ ("#e1"). Click (function () {alert ("Selected value is:" +$ ("#e2"). Select2 ("Val");}); Gets the selected ID value
  11. $ ("#e1"). Click (function () {$ ("#e8_2"). Select2 ("Val", ["CA", "MA"]);}); Id= "CA", id= "MA" selected
  12. $ ("#e12"). Click (function () {alert ("Selected value is:" +json.stringify ($ ("#e2"). Select2 ("Data")); /Get selected JSON object
  13. $ ("#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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.