Getting Started Installation Basic usage Builds and modules 2. Troubleshooting Getting Help Common problems 3. Appearance 5. Options 6. Data sources The Select2 data format Ajax remote data Arrays 7. Dropdown 8. Selections 9. Dynamic option creation Placeholders Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.
The option can be set to a negative value to permanently hide the search field. Only applies to single-value select boxes. Initial value that is selected if no other selection is made. This option only works when the placeholder is specified. Whether or not Select2 allows selection of multiple values. Function used to get the id from the choice object or a string representing the key under which the id is stored.
Used to determine whether or not the search term matches an option when a built-in query function is used. The built in query function is used when Select2 is attached to a select , or the local or tags helpers are used. Only given when attached to select. Can be used to match against custom attributes on the option tag in addition to matching on the option 's text.
Used to sort the results list for searching right before display. Useful for sorting matches by relevance to the user's search term. Function used to render the current selection. Function that can be used to escape html markup.
This is the function defined in the escapeMarkup option, or the default. Function used to render a result that the user can select. Function used to escape markup in results. If you do not expect to render custom markup you should pass your text through this function to escape any markup that may have been accidentally returned.
This function is configurable in options of select2. Function used to add css classes to result elements. String containing "Searching String containing "Search input too short" message, or Function used to render the message.
String containing "Search input too long" message, or Function used to render the message. String containing "You cannot select any more choices" message, or Function used to render the message. String containing "Loading more results…" message, or Function used to render the message.
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
Object representing the new choice. Must at least contain an id attribute. Define the position where to insert element created by createSearchChoice. Called when Select2 is created to allow the user to initialize the selection based on the value of the element select2 is attached to.
A tokenizer function can process the input typed into the search field after every keystroke and extract and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly by separating them with a comma or a space instead of pressing enter. Tokenizer only applies to multi-selects. Array of objects representing the current selection. Useful if tokenizer needs to filter out duplicates.
Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.
Returns the string to which the input of the search field should be set to. Usually this is the remainder, of any, of the string after the tokens have been stripped. If undefined or null is returned the input of the search field is unchanged. An array of strings that define token separators for the default tokenizer function.
By default, this option is set to an empty array which means tokenization using the default tokenizer is disabled. Usually it is sensible to set this option to a value similar to [',', ' ']. Function used to query results for the search term. An object that persists across the lifecycle of queries for the same search term the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term. When this function is first called for a new search term this object will be null.
The user may choose to set any object in the results. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a "continuation token" that needs to be passed back to them in order to retrieve the next page of search results.
Callback function that should be called with the result object. The result object: Parameter Type Description result. Array of result objects. The default renderers expect objects with id and text keys. The id property is required, even if custom renderers are used. The object may also contain a children key if hierarchical data is displayed. The object may also contain a disabled boolean property indicating whether this result can be selected.
A user-defined object that should be made available as the context parameter to the query function on subsequent queries to load more result pages for the same search term.
See the description of options. Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses. Parameter Type Description transport. Function that will be used to perform the ajax request. Allows the use of various ajax wrapper libraries such as: AjaxManager.
Data type for the request. If set to false , it will force requested pages not to be cached by the browser. Default is false. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests.
Function to generate query parameters for the ajax request. See options. Function used to build the query results object from the ajax response results data, page, query Parameter Type Description data. An object or a function that returns an object that contains extra parameters that will be passed to the transport. Options for the built in query function that works with arrays.
Select2 is hosted on both the jsDelivr and cdnjs CDNs. Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN. Select2 is available on Bower. Add the following to your bower. Include them in your page:. We strongly recommend that you use either a CDN or a package manager like Bower or npm. This will make it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released.
Nonetheless if you prefer to integrate Select2 into your project manually, you can download the release of your choice from GitHub and copy the files from the dist directory into your project. Getting Started Installation Basic usage Builds and modules 2.
0コメント