Naked Form Select

Use this package to style form selects that adds minimal markup and requires minimal css. Naked Form Select supports single and multi-select as well as has an option to turn on keyword search. It is written in Javascript and requires no other dependencies.

Demo

I've provided a simple demo in the demo folder.

Quick start

• Install with npm: npm install naked-form-select

Support

"browserslist": [

    "> 1%",

    "last 2 versions",

    "ie >= 11"

]

$3

Include the files in the dist/js/ie11-polyfills as this plugin uses forEach, Array.from, and closest.

Usage

$3

Initialize by passing in your selector. For example: nakedFormSelect('select')

$3

To enable multi-select, just make sure your

$3

#### data-multiple-keyword
Add data-multiple-keyword to


If option 1 is selected, the label will read 'Option 1'. However, if Option 1 and 2 are selected, the label will read '2 donuts selected'. The keyword provided is turned plural so I recommend that you enter in the singular version of your noun.

#### data-label Adddata-label="true"to any select (single or multiple) in order to set the default verbiage in the label to the text content to the first option but while excluding the first option from the dropdown itself. For example:``

Will result in an output that looks like this (the following is not the exact markup generated by naked form select, it is simplified for the example):`


  Banana

  Orange

  Apple


$3

Enabling keyword search adds an input with a button to the options dropdown. The options are reduced based off of the matching characters entered into the input by the user. In addition to the 'on' option, there is also a placeholder option in which you can control the input's placeholder text.
Enable keyword search for your select by the following example:

`nakedFormSelect('select', { keywordSearch: { on: true, placeholder: 'Enter keyword' } });`

`$3`


Add a submit button to the bottom of your dropdown list by the following example:


  nakedFormSelect('select', {
    submitBtn: {
      on: true,
      text: 'Submit this form'
    }
  });


It will submit the parent form.
$3

Query target select elements within a certain context. This option accepts both a value and a boolean property to query document. For instance, reference
Example #4 in the demo.html file. If you want to initialize select elements with a class of .example-4 within a containing element with a class of .section-with-context, you would do so like this:


nakedFormSelect('.example-4', {
  context: {
    value: '.section-with-context',
    queryDocument: true
  }
});


This essentially accomplishes what the context parameter in jQuery selectors does.
I specifically created the 'queryDocument' option for the Drupal projects I work on to take advantage of the context variable paired with Drupal Behaviors.
So, if this option is turned on (default is 'false'), context.value will be queried intead of document.
$3


{
  context = {
    value: undefined,
    queryDocument: false
  },
  keywordSearch = {
    on: false,
    placeholder: undefined
  },
  submitBtn = {
    on: false,
    text: undefined
  }
}

Copyright and license

Licensed under the MIT license.