### Install Slim Select via npm

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Use npm to install the Slim Select library. This is the recommended method for Node.js projects.

```bash
npm install slim-select
```

--------------------------------

### Vue Integration

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Instructions and example for using SlimSelect with Vue 3, including installation and basic usage.

```APIDOC
## Vue Integration

### Description
Utilize SlimSelect within Vue 3 applications with official component support, ensuring full reactivity.

### Installation
```bash
npm install slim-select
```

### Usage
```vue
<script lang="ts">
import SlimSelect from 'slim-select/vue'
import 'slim-select/styles'

export default {
  components: { SlimSelect },
  data() {
    return {
      selected: 'value2',
      options: [
        { text: 'Value 1', value: 'value1' },
        { text: 'Value 2', value: 'value2' },
        { text: 'Value 3', value: 'value3' }
      ]
    }
  }
}
</script>

<template>
  <SlimSelect v-model="selected" :data="options" />
</template>
```
```

--------------------------------

### SlimSelect Initialization with Settings

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Demonstrates how to initialize SlimSelect with various configuration settings to customize its behavior and appearance.

```APIDOC
## SlimSelect Initialization with Settings

### Description
Initialize SlimSelect with custom settings to control its behavior, such as search functionality, accessibility, and display options.

### Method
`new SlimSelect(options)`

### Parameters
#### Settings Object
- **select** (string | HTMLElement) - Required - The CSS selector or HTML element for the select input.
- **settings** (object) - Optional - An object containing configuration options.
  - **disabled** (boolean) - `false` - Disable the select.
  - **alwaysOpen** (boolean) - `false` - Keep dropdown always open.
  - **showSearch** (boolean) - `true` - Show search input.
  - **focusSearch** (boolean) - `true` - Auto focus search on open.
  - **keepSearch** (boolean) - `false` - Keep search input value when dropdown closes.
  - **ariaLabel** (string) - `'Combobox'` - ARIA label for accessibility.
  - **searchPlaceholder** (string) - `'Search'` - Search input placeholder.
  - **searchText** (string) - `'No Results'` - Text when no results found.
  - **searchingText** (string) - `'Searching...'` - Text while searching.
  - **searchHighlight** (boolean) - `false` - Highlight search terms.
  - **closeOnSelect** (boolean) - `true` - Close dropdown after selection.
  - **contentLocation** (HTMLElement) - `document.body` - Where to append dropdown.
  - **contentPosition** (string) - `'absolute'` - CSS position: absolute, relative, fixed.
  - **contentWidth** (string) - `''` - Content width: "500px" exact, ">500px" min-width, "<500px" max-width.
  - **openPosition** (string) - `'auto'` - Open direction: auto, up, down.
  - **placeholderText** (string) - `'Select Value'` - Placeholder text.
  - **allowDeselect** (boolean) - `false` - Allow deselecting in single select.
  - **hideSelected** (boolean) - `false` - Hide selected options in dropdown.
  - **keepOrder** (boolean) - `false` - Keep user click order (not DOM order) for getSelected.
  - **showOptionTooltips** (boolean) - `false` - Show tooltips on options.
  - **minSelected** (number) - `0` - Minimum selections (multi-select).
  - **maxSelected** (number) - `1000` - Maximum selections (multi-select).
  - **timeoutDelay** (number) - `200` - Delay for callbacks (ms).
  - **maxValuesShown** (number) - `20` - Max values shown before message.
  - **maxValuesMessage** (string) - `'{number} selected'` - Message when max values exceeded.
  - **addableText** (string) - `'Press "Enter" to add {value}'` - Text for addable option.

### Request Example
```javascript
new SlimSelect({
  select: '#selectElement',
  settings: {
    showSearch: true,
    placeholderText: 'Choose an option',
    allowDeselect: true
  }
})
```
```

--------------------------------

### Basic Slim Select Initialization

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Initialize Slim Select with a basic configuration targeting a select element. Optional CSS imports are shown.

```javascript
import SlimSelect from 'slim-select'
import 'slim-select/styles' // optional css import method
import 'slim-select/scss' // optional scss import method

new SlimSelect({
  select: '#selectElement'
})
```

```html
<select id="selectElement">
  <option value="value1">Value 1</option>
</select>
```

--------------------------------

### Slim Select Initialization with Data

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Initialize Slim Select by providing data as an array of objects. Supports both simple options and optgroups.

```javascript
new SlimSelect({
  select: '#selectElement',

  // Array of Option objects
  data: [{ text: 'Value 1', value: 'value1' }],

  // or

  // Array of Optgroups and/or Options
  data: [{ label: 'Optgroup Label', options: { text: 'Value 1', value: 'value1' } }]
})
```

--------------------------------

### SlimSelect Methods

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Provides methods for programmatic control over a SlimSelect instance after initialization.

```APIDOC
## SlimSelect Methods

### Description
Control and interact with a SlimSelect instance programmatically using its available methods.

### Usage
First, get an instance of SlimSelect:
```javascript
const slim = new SlimSelect({ select: '#selectElement' })
```

### Methods
- **enable()**: Enables the select element.
- **disable()**: Disables the select element.
- **getData()**: Gets the current data array of the select.
  - Returns: `Array<Option | Optgroup>`
- **setData(data)**: Sets new data for the select.
  - `data` (Array<Option | Optgroup>) - The new data array.
- **getSelected()**: Gets the selected values as an array of strings.
  - Returns: `string[]`
- **setSelected(values)**: Sets the selected options by their values.
  - `values` (Array<string>) - An array of values to select.
- **addOption(option)**: Adds a single option to the select.
  - `option` (Option) - The option object to add.
- **open()**: Opens the dropdown.
- **close()**: Closes the dropdown.
- **search(searchValue)**: Programmatically triggers a search.
  - `searchValue` (string) - The search query.
- **destroy()**: Destroys the SlimSelect instance and removes its event listeners.

### Example
```javascript
const slim = new SlimSelect({ select: '#selectElement' })

// Enable the select
slim.enable();

// Get current data
const currentData = slim.getData();

// Set new data
const newData = [{ id: '1', value: 'Option 1' }, { id: '2', value: 'Option 2' }];
slim.setData(newData);

// Set selected values
slim.setSelected(['value1', 'value2']);

// Destroy the instance
// slim.destroy();
```
```

--------------------------------

### Basic Slim-Select Usage in React

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Demonstrates how to use Slim-Select in a React component, managing the selected value with useState. Ensure 'slim-select/styles' is imported.

```tsx
import { useState } from 'react'
import SlimSelect from 'slim-select/react'
import 'slim-select/styles'

function MyComponent() {
  const [selected, setSelected] = useState('value2')
  const options = [
    { text: 'Value 1', value: 'value1' },
    { text: 'Value 2', value: 'value2' },
    { text: 'Value 3', value: 'value3' }
  ]

  return <SlimSelect data={options} value={selected} onChange={setSelected} />
}
```

--------------------------------

### Configure SlimSelect Settings

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Customize SlimSelect's behavior using the settings object. All values shown are defaults.

```javascript
new SlimSelect({
  select: '#selectElement',

  settings: {
    disabled: false, // Disable the select
    alwaysOpen: false, // Keep dropdown always open
    showSearch: true, // Show search input
    focusSearch: true, // Auto focus search on open
    keepSearch: false, // Keep search input value when dropdown closes
    ariaLabel: 'Combobox', // ARIA label for accessibility
    searchPlaceholder: 'Search', // Search input placeholder
    searchText: 'No Results', // Text when no results found
    searchingText: 'Searching...', // Text while searching
    searchHighlight: false, // Highlight search terms
    closeOnSelect: true, // Close dropdown after selection
    contentLocation: document.body, // Where to append dropdown
    contentPosition: 'absolute', // CSS position: absolute, relative, fixed
    contentWidth: '', // Content width: "500px" exact, ">500px" min-width, "<500px" max-width
    openPosition: 'auto', // Open direction: auto, up, down
    placeholderText: 'Select Value', // Placeholder text
    allowDeselect: false, // Allow deselecting in single select
    hideSelected: false, // Hide selected options in dropdown
    keepOrder: false, // Keep user click order (not DOM order) for getSelected
    showOptionTooltips: false, // Show tooltips on options
    minSelected: 0, // Minimum selections (multi-select)
    maxSelected: 1000, // Maximum selections (multi-select)
    timeoutDelay: 200, // Delay for callbacks (ms)
    maxValuesShown: 20, // Max values shown before message
    maxValuesMessage: '{number} selected', // Message when max values exceeded
    addableText: 'Press "Enter" to add {value}' // Text for addable option
  }
})
```

--------------------------------

### React Integration

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Information on integrating SlimSelect with React applications using hooks.

```APIDOC
## React Integration

### Description
Integrate SlimSelect into your React projects using the provided hooks for seamless functionality.

### Installation
```bash
npm install slim-select
```

### Usage
Refer to the official SlimSelect documentation for detailed React examples and advanced usage, as specific code examples are not provided in this overview.
```

--------------------------------

### Initialize SlimSelect

Source: https://github.com/brianvoe/slim-select/blob/master/example.html

Basic initialization of SlimSelect on a select element. Ensure the target element exists in the DOM.

```javascript
new SlimSelect({ select: '#selectElement' })
```

--------------------------------

### Advanced Slim-Select Usage with Ref in React

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Shows how to control Slim-Select programmatically using a ref in React. This allows access to SlimSelect methods like 'open()'.

```tsx
import { useRef } from 'react'
import SlimSelect, { SlimSelectRef } from 'slim-select/react'
import 'slim-select/styles'

function MyComponent() {
  const slimRef = useRef<SlimSelectRef>(null)

  const handleClick = () => {
    // Access SlimSelect methods via ref
    slimRef.current?.slimSelect?.open()
  }

  return (
    <>
      <SlimSelect ref={slimRef} data={options} />
      <button onClick={handleClick}>Open Dropdown</button>
    </>
  )
}
```

--------------------------------

### Handle SlimSelect Events

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Implement event callbacks to react to user interactions and internal state changes in SlimSelect.

```javascript
new SlimSelect({
  select: '#selectElement',

  events: {
    // Custom search function - return Promise or data array
    search: (searchValue: string, currentData: (Option | Optgroup)[]) => Promise<(Partial<Option> | Partial<Optgroup>)[]> | (Partial<Option> | Partial<Optgroup>)[],

    // Filter function for search - return true to show option
    searchFilter: (option: Option, search: string) => boolean,

    // Allow user to add options - return new option or error
    addable: (value: string) => Promise<Partial<Option> | string> | Partial<Option> | string | Error,

    // Before selection changes - return false to prevent change
    beforeChange: (newVal: Option[], oldVal: Option[]) => boolean | void,

    // After selection changes
    afterChange: (newVal: Option[]) => void,

    // Before dropdown opens
    beforeOpen: () => void,

    // After dropdown opens
    afterOpen: () => void,

    // Before dropdown closes
    beforeClose: () => void,

    // After dropdown closes
    afterClose: () => void,

    // Error handler
    error: (err: Error) => void
  }
})
```

--------------------------------

### Include Slim Select via CDN

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Include Slim Select using CDN links for JavaScript and CSS. This is suitable for direct HTML usage.

```html
<script src="https://unpkg.com/slim-select@latest/dist/slimselect.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slim-select@latest/dist/slimselect.css" />
```

--------------------------------

### URL Rewriting for SPA Routing on GitHub Pages

Source: https://github.com/brianvoe/slim-select/blob/master/public/404.html

This script redirects the current URL to a new format suitable for SPAs on GitHub Pages. It converts the path and query string into a query string parameter 'p' for the path and 'q' for the query, preserving the hash fragment. Ensure this 404.html file is at least 512 bytes for Internet Explorer compatibility.

```javascript
var pathPrefix = false
var l = window.location
l.replace(
  l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname
    .split('/')
    .slice(0, 2 * pathPrefix)
    .join('/') + '/?p=/' + l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') + (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash,
)
```

--------------------------------

### Control SlimSelect Programmatically with Methods

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Utilize SlimSelect's methods for programmatic control over the select element's state and data.

```javascript
const slim = new SlimSelect({ select: '#selectElement' })

slim.enable() // Enable the select
slim.disable() // Disable the select
slim.getData() // Get current data array
slim.setData(data) // Set new data array
slim.getSelected() // Get selected values as string[]
slim.setSelected(['value1', 'value2']) // Set selected by values
slim.addOption(option) // Add a single option
slim.open() // Open the dropdown
slim.close() // Close the dropdown
slim.search('searchValue') // Programmatically search
slim.destroy() // Destroy the instance
```

--------------------------------

### SlimSelect Events

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Defines event callbacks that can be used to hook into SlimSelect's lifecycle and user interactions.

```APIDOC
## SlimSelect Events

### Description
Register callback functions to respond to various events triggered by SlimSelect, such as searching, changing selections, and opening/closing the dropdown.

### Method
`new SlimSelect(options)`

### Parameters
#### Events Object
- **events** (object) - Optional - An object containing event callback functions.
  - **search** (function) - Custom search function. Returns a Promise or data array.
    - `searchValue` (string) - The current search input value.
    - `currentData` (Array<Option | Optgroup>) - The current data in the select.
    - Returns: `Promise<(Partial<Option> | Partial<Optgroup>)[]> | (Partial<Option> | Partial<Optgroup>)[]`
  - **searchFilter** (function) - Filter function for search results. Returns `true` to show an option.
    - `option` (Option) - The option being filtered.
    - `search` (string) - The current search input value.
    - Returns: `boolean`
  - **addable** (function) - Callback for when a user attempts to add a new option. Returns a new option or an error.
    - `value` (string) - The value to be added.
    - Returns: `Promise<Partial<Option> | string> | Partial<Option> | string | Error`
  - **beforeChange** (function) - Called before the selection changes. Return `false` to prevent the change.
    - `newVal` (Array<Option>) - The new selected options.
    - `oldVal` (Array<Option>) - The previously selected options.
    - Returns: `boolean | void`
  - **afterChange** (function) - Called after the selection has changed.
    - `newVal` (Array<Option>) - The new selected options.
    - Returns: `void`
  - **beforeOpen** (function) - Called before the dropdown opens.
    - Returns: `void`
  - **afterOpen** (function) - Called after the dropdown has opened.
    - Returns: `void`
  - **beforeClose** (function) - Called before the dropdown closes.
    - Returns: `void`
  - **afterClose** (function) - Called after the dropdown has closed.
    - Returns: `void`
  - **error** (function) - Error handler callback.
    - `err` (Error) - The error object.
    - Returns: `void`

### Request Example
```javascript
new SlimSelect({
  select: '#selectElement',
  events: {
    search: async (searchValue, currentData) => {
      // Custom search logic
      return [{ id: 'new', value: 'New Option' }];
    },
    afterChange: (newVal) => {
      console.log('Selection changed:', newVal);
    }
  }
})
```
```

--------------------------------

### Slim Select Data Type Definitions

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Defines the structure for optgroup and option objects used when providing data to Slim Select.

```javascript
// <optgroup>
var optgroup = {
  label: 'label', // Required
  selectAll: false, // Optional - default false
  closable: 'off', // Optional - default 'off' - 'off', 'open', 'close'
  options: [] // Required - value is an array of options
}

// <option>
var option = {
  text: 'text', // Required
  value: 'value', // Optional - value will be set by text if not set
  html: '<b>Html</b>', // Optional - if set, used for display purposes
  selected: false, // Optional - default is false
  display: true, // Optional - default is true
  disabled: false, // Optional - default is false
  mandatory: false, // Optional - default is false
  placeholder: false, // Optional - default is false
  class: '', // Optional - default is not set
  style: '', // Optional - default is not set
  data: {} // Optional - If you have data attributes
}
```

--------------------------------

### Use SlimSelect in Vue

Source: https://github.com/brianvoe/slim-select/blob/master/README.md

Integrate SlimSelect into a Vue 3 component, managing selection and options reactively.

```vue
<script lang="ts">
import SlimSelect from 'slim-select/vue'
import 'slim-select/styles'

export default {
  components: { SlimSelect },
  data() {
    return {
      selected: 'value2',
      options: [
        { text: 'Value 1', value: 'value1' },
        { text: 'Value 2', value: 'value2' },
        { text: 'Value 3', value: 'value3' }
      ]
    }
  }
}
</script>

<template>
  <SlimSelect v-model="selected" :data="options" />
</template>
```

--------------------------------

### URL Path and Query String Transformation

Source: https://github.com/brianvoe/slim-select/blob/master/docs/404.html

This JavaScript code modifies the current URL to consolidate path and query parameters into a query string format. It's designed for SPAs to handle routing on GitHub Pages. Ensure the 404.html file is at least 512 bytes for IE compatibility.

```javascript
var pathPrefix = false
var l = window.location
l.replace(
  l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname
    .split('/')
    .slice(0, 2 * pathPrefix)
    .join('/') +
    '/?p=/' + l.pathname.slice(1).split('/').slice(pathPrefix).join('/').replace(/&/g, '~and~') +
    (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
    l.hash,
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.