-
-
Choices.js
-
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
-
For all config options, visit the GitHub repo .
+
+
+
+
Choices.js
+
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
+
For all config options, visit the GitHub repo .
-
+
-
Text inputs
-
Limited to 5 values with remove button
-
+
Text inputs
+
Limited to 5 values with remove button
+
-
Unique values only, no pasting
-
+
Unique values only, no pasting
+
-
Email addresses only
-
+
Email addresses only
+
-
Disabled
-
+
Disabled
+
-
Prepends and appends a value to each items return value
-
+
Prepends and appends a value to each items return value
+
-
Preset values passed through options
-
+
Preset values passed through options
+
-
Right-to-left
-
+
Right-to-left
+
-
+
-
Multiple select input
-
Default
-
- Dropdown item 1
- Dropdown item 2
- Dropdown item 3
- Dropdown item 4
-
+
Multiple select input
+
Default
+
+ Dropdown item 1
+ Dropdown item 2
+ Dropdown item 3
+ Dropdown item 4
+
-
Option groups
-
-
- London
- Manchester
- Liverpool
-
-
- Paris
- Lyon
- Marseille
-
-
- Hamburg
- Munich
- Berlin
-
-
- New York
- Washington
- Michigan
-
-
- Madrid
- Barcelona
- Malaga
-
-
- Montreal
- Toronto
- Vancouver
-
-
+
Option groups
+
+
+ London
+ Manchester
+ Liverpool
+
+
+ Paris
+ Lyon
+ Marseille
+
+
+ Hamburg
+ Munich
+ Berlin
+
+
+ New York
+ Washington
+ Michigan
+
+
+ Madrid
+ Barcelona
+ Malaga
+
+
+ Montreal
+ Toronto
+ Vancouver
+
+
-
Options from remote source (Fetch API) & limited to 5
-
+
Options from remote source (Fetch API) & limited to 5
+
-
Right-to-left
-
- Dropdown item 1
- Dropdown item 2
- Dropdown item 3
- Dropdown item 4
-
+
Right-to-left
+
+ Dropdown item 1
+ Dropdown item 2
+ Dropdown item 3
+ Dropdown item 4
+
-
+
-
Single select input
-
Default
-
- Dropdown item 1
- Dropdown item 2
- Dropdown item 3
-
+
Single select input
+
Default
+
+ Dropdown item 1
+ Dropdown item 2
+ Dropdown item 3
+
-
Options from remote source (Fetch API)
-
+
Options from remote source (Fetch API)
+
-
Options from remote source (XHR) & remove button
-
+
Options from remote source (XHR) & remove button
+
-
Option groups
-
-
- London
- Manchester
- Liverpool
-
-
- Paris
- Lyon
- Marseille
-
-
- Hamburg
- Munich
- Berlin
-
-
- New York
- Washington
- Michigan
-
-
- Madrid
- Barcelona
- Malaga
-
-
- Montreal
- Toronto
- Vancouver
-
-
+
Option groups
+
+
+ London
+ Manchester
+ Liverpool
+
+
+ Paris
+ Lyon
+ Marseille
+
+
+ Hamburg
+ Munich
+ Berlin
+
+
+ New York
+ Washington
+ Michigan
+
+
+ Madrid
+ Barcelona
+ Malaga
+
+
+ Montreal
+ Toronto
+ Vancouver
+
+
-
Right-to-left
-
- Dropdown item 1
- Dropdown item 2
- Dropdown item 3
-
+
Right-to-left
+
+ Dropdown item 1
+ Dropdown item 2
+ Dropdown item 3
+
-
Options added via config with no search
-
- Zero
-
+
Options added via config with no search
+
+ Zero
+
-
Option and option groups added via config
-
+
Option and option groups added via config
+
-
Option selected via config
-
+
Option selected via config
+
-
Options without sorting
-
- Madrid
- Toronto
- Vancouver
- London
- Manchester
- Liverpool
- Paris
- Malaga
- Washington
- Lyon
- Marseille
- Hamburg
- Munich
- Barcelona
- Berlin
- Montreal
- New York
- Michigan
-
+
Options without sorting
+
+ Madrid
+ Toronto
+ Vancouver
+ London
+ Manchester
+ Liverpool
+ Paris
+ Malaga
+ Washington
+ Lyon
+ Marseille
+ Hamburg
+ Munich
+ Barcelona
+ Berlin
+ Montreal
+ New York
+ Michigan
+
-
Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'
-
States
-
- Michigan
- Texas
- Chicago
- New York
- Washington
-
+
Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'
+
States
+
+ Michigan
+ Texas
+ Chicago
+ New York
+ Washington
+
-
Boroughs
-
- The Bronx
- Brooklyn
- Manhattan
- Queens
- Staten Island
-
-
+
Boroughs
+
+ The Bronx
+ Brooklyn
+ Manhattan
+ Queens
+ Staten Island
+
-
-
-
-
-
+ var example12 = new Choices('[data-choice]', {
+ placeholderValue: 'This is a placeholder set in the config',
+ removeButton: true,
+ });
+
+ var example13 = new Choices('#choices-single-no-search', {
+ search: false,
+ removeItemButton: true,
+ choices: [
+ {value: 'One', label: 'Label One'},
+ {value: 'Two', label: 'Label Two', disabled: true},
+ {value: 'Three', label: 'Label Three'},
+ ],
+ }).setChoices([
+ {value: 'Four', label: 'Label Four', disabled: true},
+ {value: 'Five', label: 'Label Five'},
+ {value: 'Six', label: 'Label Six', selected: true},
+ ], 'value', 'label');
+
+ var example14 = new Choices('#choices-single-preset-options', {
+ placeholder: true,
+ }).setChoices([{
+ label: 'Group one',
+ id: 1,
+ disabled: false,
+ choices: [
+ {value: 'Child One', label: 'Child One', selected: true},
+ {value: 'Child Two', label: 'Child Two', disabled: true},
+ {value: 'Child Three', label: 'Child Three'},
+ ]
+ },
+ {
+ label: 'Group two',
+ id: 2,
+ disabled: false,
+ choices: [
+ {value: 'Child Four', label: 'Child Four', disabled: true},
+ {value: 'Child Five', label: 'Child Five'},
+ {value: 'Child Six', label: 'Child Six'},
+ ]
+ }], 'value', 'label');
+
+ var example15 = new Choices('#choices-single-selected-option', {
+ choices: [
+ {value: 'One', label: 'Label One', selected: true},
+ {value: 'Two', label: 'Label Two', disabled: true},
+ {value: 'Three', label: 'Label Three'},
+ ],
+ }).setValueByChoice('Two');
+
+ var example16 = new Choices('#choices-single-no-sorting', {
+ shouldSort: false,
+ });
+
+ var states = new Choices(document.getElementById('states'), {
+ callbackOnChange: function(value) {
+ if(value === 'New York') {
+ boroughs.enable();
+ } else {
+ boroughs.disable();
+ }
+ }
+ });
+
+ var boroughs = new Choices(document.getElementById('boroughs')).disable();
+ });
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index af5f6be..1b12d93 100644
--- a/package.json
+++ b/package.json
@@ -63,14 +63,12 @@
"fuse.js": "^2.2.0"
},
"npmName": "choices.js",
- "npmFileMap": [
- {
- "basePath": "assets",
- "files": [
- "scripts/dist/*",
- "styles/css/*",
- "icons/*"
- ]
- }
- ]
-}
+ "npmFileMap": [{
+ "basePath": "assets",
+ "files": [
+ "scripts/dist/*",
+ "styles/css/*",
+ "icons/*"
+ ]
+ }]
+}
\ No newline at end of file
diff --git a/server.js b/server.js
index c628865..31ec6cf 100644
--- a/server.js
+++ b/server.js
@@ -4,11 +4,11 @@ var config = require('./webpack.config.dev');
var opn = require('opn');
new WebpackDevServer(webpack(config), {
- publicPath: config.output.publicPath,
- historyApiFallback: true,
- quiet: true, // lets WebpackDashboard do its thing
-}).listen(3000, 'localhost', function (err, result) {
- if (err) console.log(err);
- opn('http://localhost:3000');
- console.log('Listening at localhost:3000');
-});
+ publicPath: config.output.publicPath,
+ historyApiFallback: true,
+ quiet: true, // lets WebpackDashboard do its thing
+}).listen(3000, 'localhost', function(err, result) {
+ if (err) console.log(err);
+ opn('http://localhost:3000');
+ console.log('Listening at localhost:3000');
+});
\ No newline at end of file
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index fad6b22..78f1da9 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -5,34 +5,34 @@ var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();
module.exports = {
- devtool: 'eval',
- entry: [
- 'webpack-dev-server/client?http://localhost:3000',
- './assets/scripts/src/choices'
- ],
- output: {
- path: path.join(__dirname, 'dist'),
- filename: 'choices.min.js',
- publicPath: '/assets/scripts/dist/',
- },
- eslint: {
- configFile: '.eslintrc'
- },
- plugins: [
- new DashboardPlugin(dashboard.setData),
- new webpack.HotModuleReplacementPlugin(),
- new webpack.DefinePlugin({
- 'process.env': {
- 'NODE_ENV': JSON.stringify('development')
- }
- })
- ],
- module: {
- loaders: [{
- test: /\.js$/,
- exclude: /(node_modules|bower_components)/,
- loaders: ['babel', 'eslint-loader'],
- include: path.join(__dirname, 'assets/scripts/src')
- }]
- }
+ devtool: 'eval',
+ entry: [
+ 'webpack-dev-server/client?http://localhost:3000',
+ './assets/scripts/src/choices'
+ ],
+ output: {
+ path: path.join(__dirname, 'dist'),
+ filename: 'choices.min.js',
+ publicPath: '/assets/scripts/dist/',
+ },
+ eslint: {
+ configFile: '.eslintrc'
+ },
+ plugins: [
+ new DashboardPlugin(dashboard.setData),
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.DefinePlugin({
+ 'process.env': {
+ 'NODE_ENV': JSON.stringify('development')
+ }
+ })
+ ],
+ module: {
+ loaders: [{
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ loaders: ['babel', 'eslint-loader'],
+ include: path.join(__dirname, 'assets/scripts/src')
+ }]
+ }
};
\ No newline at end of file
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
index 57cb0fe..42b9fc7 100644
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -6,48 +6,48 @@ var banner = `/*! ${ package.name } v${ package.version } | (c) ${ new Date().ge
var minimize = process.argv.indexOf('--minimize') !== -1;
var config = {
- devtool: 'cheap-module-source-map',
- entry: [
- './assets/scripts/src/choices'
- ],
- output: {
- path: path.join(__dirname, '/assets/scripts/dist'),
- filename: minimize ? 'choices.min.js' : 'choices.js',
- publicPath: '/assets/scripts/dist/'
- },
- plugins: [
- new webpack.DefinePlugin({
- 'process.env': {
- // This has effect on the react lib size
- 'NODE_ENV': JSON.stringify('production'),
- }
- }),
- new wrapperPlugin({
- header: banner,
- }),
- ],
- module: {
- loaders: [{
- test: /\.js$/,
- exclude: /(node_modules|bower_components)/,
- loaders: ['babel'],
- include: path.join(__dirname, 'assets/scripts/src')
- }]
- }
+ devtool: 'cheap-module-source-map',
+ entry: [
+ './assets/scripts/src/choices'
+ ],
+ output: {
+ path: path.join(__dirname, '/assets/scripts/dist'),
+ filename: minimize ? 'choices.min.js' : 'choices.js',
+ publicPath: '/assets/scripts/dist/'
+ },
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': {
+ // This has effect on the react lib size
+ 'NODE_ENV': JSON.stringify('production'),
+ }
+ }),
+ new wrapperPlugin({
+ header: banner,
+ }),
+ ],
+ module: {
+ loaders: [{
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ loaders: ['babel'],
+ include: path.join(__dirname, 'assets/scripts/src')
+ }]
+ }
};
if (minimize) {
- config.plugins.unshift(new webpack.optimize.UglifyJsPlugin({
- sourceMap: false,
- mangle: true,
- output: {
- comments: false
- },
- compress: {
- warnings: false,
- screw_ie8: true
- }
- }));
+ config.plugins.unshift(new webpack.optimize.UglifyJsPlugin({
+ sourceMap: false,
+ mangle: true,
+ output: {
+ comments: false
+ },
+ compress: {
+ warnings: false,
+ screw_ie8: true
+ }
+ }));
}
module.exports = config;
\ No newline at end of file