Selectize usage summary, selectize Summary

Selectize usage summary, selectize Summary
I. Introduction

Selectize is an extensible jQuery-based custom drop-down box UI control. It is useful for displaying tags, contact lists, and country selectors. Its size is ~ About 7 kb (gzip compression. Provides a reliable and experienced clean and powerful API.

Function introduction:

• Options can be queried and sorted;
• Use the arrow keys to continue and → at 1 then⃣Move between selected options;
• You can use the option/ctrl key to select or delete a project.
• Allow users to create options (including asynchronous );
• Remote Data Loading;
• Clean APIs and code, interface-based processing, easy to modify;
• Strong scalability. Use plug-in APIs to develop custom functions;
• Supports touch and iOS 5 + devices.

Dependency:

• Jquery (1.7 and greater)
• Sifter (bundled in "standalone" build)
• Microplugin (bundled in "standalone" build)

Ii. Installation and reference

All pre-compiled files are in the "dist" folder, and you can introduce standalone/selectize. min. js and css/selectize.default.css.

Directory structure

Js/
Standalone/
Selectize. js-With dependencies, minus jquery
Selectize. js-Without dependencies
Less/
Selectize. less-Core styles
Selectize. default. less-Default theme
Selectize. bootstrap2.less-Bootstrap 2 theme
Selectize. bootstrap3.less-Bootstrap 3 theme
Plugins/-Individual plugin styles
Css/
Selectize.css-Core styles
Selectize.default.css-Default theme (with core styles)
Selectize.bootstrap2.css-Bootstrap 2 theme
Selectize.bootstrap3.css-Bootstrap 3 theme

Document Description
Github: https://github.com/selectize/selectize.js
Configuration: https://github.com/selectize/selectize.js/blob/master/docs/usage.md
Event: https://github.com/selectize/selectize.js/blob/master/docs/events.md
API: https://github.com/selectize/selectize.js/blob/master/docs/api.md
Custom plug-in: https://github.com/selectize/selectize.js/blob/master/docs/plugins.md

Iii. Usage Summary

Take the phone number as an example to summarize

1. Initialization

$ ("# Select-telephone "). selectize ({valueField: 'telephonenumber', labelField: 'telephonenumber', searchField: 'telephonenumber', create: true, render: {item: function (item, escape) {return '<span>' + escape (item. telephoneNumber) + '</span>';}, option: function (item, escape) {return fortmatTelephone (item. telephoneNumber, item. vertex number) ;}, load: function (query, callback) {// console. log (Query); // real-time remote query // callback (data) ;}}; function fortmatTelephone (tel, shortTel) {var markup = '<div class = "show-select-option">'; if (! IsEmpty (tel) {external tel = isEmpty (external tel )? "": '(' + ShortTel + ")"; markup + = '<p class = "text-primary"> Tel: '+ tel + External tel +' </p> ';} return markup +' </div> ';}

Create: You can add drop-down options. Enter the options and press Enter;
Render: The values of item and option must be formatted using HTML tags;
Load: query is the value entered in the input box. Note that if the value you entered has been searched before, it will not execute this method.

2. drop-down Close event

Selectize. on ('dropdown _ close', function ($ dropdown) {if (closeCount % 2 = 0) {// executed twice, use the closeCount variable to eliminate bugs} closeCount + = 1 ;});

3. Selected values

SetValue (value, silent): Set the selected value. Note that this value must already be in the drop-down list;
SetTextboxValue: Set the text box value, not the selected value;
GetValue (): Get the selected value;
Focus (): the focus is automatically displayed in the drop-down list.

telephoneSelectize.setValue('12345678', true);    telephoneSelectize.setTextboxValue('1111');    telephoneSelectize.focus();

4. enable or disable

var $selectTelephone = $("#select-telephone").selectize();    telephoneSelectize = $selectTelephone[0].selectize;    telephoneSelectize.disable();    telephoneSelectize.enable();

5. Add drop-down options

telephoneSelectize.addOption(telArray);   telephoneSelectize.enable();

You can add an option or an array, which will not change if it already exists. This operation does not refresh the drop-down box option. You need to use refreshOptions () to refresh