Skip to content

Commit

Permalink
add on clear item
Browse files Browse the repository at this point in the history
  • Loading branch information
@lekoala
lekoala committed Nov 27, 2024
1 parent 31669dd commit ce698b9
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 49 deletions.
28 changes: 28 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# For more information about the properties used in
# this file, please see the EditorConfig documentation:
# http://editorconfig.org/

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = false
max_line_length = 250

[*.yml]
indent_size = 2
indent_style = space

[package.json]
# The indent size used in the `package.json` file cannot be changed
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
indent_size = 2
indent_style = space
13 changes: 13 additions & 0 deletions autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@
* @returns {void}
*/

/**
* @callback ValueCallback
* @param {String} value
* @param {Autocomplete} inst
* @returns {void}
*/

/**
* @callback ServerCallback
* @param {Response} response
Expand Down Expand Up @@ -82,6 +89,7 @@
* @property {String} notFoundMessage Display a no suggestions found message. Leave empty to disable
* @property {RenderCallback} onRenderItem Callback function that returns the label
* @property {ItemCallback} onSelectItem Callback function to call on selection
* @property {ValueCallback} onClearItem Callback function to call on clear
* @property {ServerCallback} onServerResponse Callback function to process server response. Must return a Promise
* @property {ErrorCallback} onServerError Callback function to process server errors.
* @property {ItemCallback} onChange Callback function to call on change-event. Returns currently selected item if any
Expand Down Expand Up @@ -133,6 +141,7 @@ const DEFAULTS = {
return label;
},
onSelectItem: (item, inst) => {},
onClearItem: (item, inst) => {},
onServerResponse: (response, inst) => {
return response.json();
},
Expand Down Expand Up @@ -694,10 +703,14 @@ class Autocomplete {
}

clear() {
const v = this._searchInput.value;

this._searchInput.value = "";
if (this._hiddenInput) {
this._hiddenInput.value = "";
}

this._config.onClearItem(v, this);
}

// #endregion
Expand Down
108 changes: 59 additions & 49 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,58 +46,59 @@ Data can be nested in the response under the data key (configurable with serverD

Options can be either passed to the constructor (eg: optionName) or in data-option-name format.

| Name | Type | Description |
| -------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| showAllSuggestions | <code>Boolean</code> | Show all suggestions even if they don't match |
| suggestionsThreshold | <code>Number</code> | Number of chars required to show suggestions |
| maximumItems | <code>Number</code> | Maximum number of items to display |
| autoselectFirst | <code>Boolean</code> | Always select the first item |
| ignoreEnter | <code>Boolean</code> | Ignore enter if no items are selected (play nicely with autoselectFirst=0) |
| tabSelect | <code>Boolean</code> | Tab will trigger selection if active |
| updateOnSelect | <code>Boolean</code> | Update input value on selection (doesn't play nice with autoselectFirst) |
| highlightTyped | <code>Boolean</code> | Highlight matched part of the label |
| highlightClass | <code>String</code> | Class added to the mark label |
| fullWidth | <code>Boolean</code> | Match the width on the input field |
| fixed | <code>Boolean</code> | Use fixed positioning (solve overflow issues) |
| fuzzy | <code>Boolean</code> | Fuzzy search |
| startsWith | <code>Boolean</code> | Must start with the string. Defaults to false (it matches any position). |
| fillIn | <code>Boolean</code> | Show fill in icon. |
| preventBrowserAutocomplete | <code>Boolean</code> | Additional measures to prevent browser autocomplete |
| itemClass | <code>String</code> | Applied to the dropdown item. Accepts space separated classes. |
| activeClasses | <code>Array</code> | By default: ["bg-primary", "text-white"] |
| labelField | <code>String</code> | Key for the label |
| valueField | <code>String</code> | Key for the value |
| searchFields | <code>Array</code> | Key for the search |
| queryParam | <code>String</code> | Key for the query parameter for server |
| items | <code>Array</code> \| <code>Object</code> | An array of label/value objects or an object with key/values |
| source | <code>function</code> | A function that provides the list of items |
| hiddenInput | <code>Boolean</code> | Create an hidden input which stores the valueField |
| hiddenValue | <code>String</code> | Populate the initial hidden value. Mostly useful with liveServer. |
| clearControl | <code>String</code> | Selector that will clear the input on click. |
| datalist | <code>String</code> | The id of the source datalist |
| server | <code>String</code> | Endpoint for data provider |
| serverMethod | <code>String</code> | HTTP request method for data provider, default is GET |
| serverParams | <code>String</code> \| <code>Object</code> | Parameters to pass along to the server. You can specify a "related" key with the id of a related field. |
| serverDataKey | <code>String</code> | By default: data |
| fetchOptions | <code>Object</code> | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax) |
| liveServer | <code>Boolean</code> | Should the endpoint be called each time on input |
| noCache | <code>Boolean</code> | Prevent caching by appending a timestamp |
| debounceTime | <code>Number</code> | Debounce time for live server |
| notFoundMessage | <code>String</code> | Display a no suggestions found message. Leave empty to disable |
| onRenderItem | [<code>RenderCallback</code>](#RenderCallback) | Callback function that returns the label |
| onSelectItem | [<code>ItemCallback</code>](#ItemCallback) | Callback function to call on selection |
| onServerResponse | [<code>ServerCallback</code>](#ServerCallback) | Callback function to process server response. Must return a Promise |
| onServerError | [<code>ErrorCallback</code>](#ErrorCallback) | Callback function to process server errors. |
| onChange | [<code>ItemCallback</code>](#ItemCallback) | Callback function to call on change-event. Returns currently selected item if any |
| onBeforeFetch | [<code>FetchCallback</code>](#FetchCallback) | Callback function before fetch |
| onAfterFetch | [<code>FetchCallback</code>](#FetchCallback) | Callback function after fetch |
| Name | Type | Description |
| --- | --- | --- |
| showAllSuggestions | <code>Boolean</code> | Show all suggestions even if they don't match |
| suggestionsThreshold | <code>Number</code> | Number of chars required to show suggestions |
| maximumItems | <code>Number</code> | Maximum number of items to display |
| autoselectFirst | <code>Boolean</code> | Always select the first item |
| ignoreEnter | <code>Boolean</code> | Ignore enter if no items are selected (play nicely with autoselectFirst=0) |
| tabSelect | <code>Boolean</code> | Tab will trigger selection if active |
| updateOnSelect | <code>Boolean</code> | Update input value on selection (doesn't play nice with autoselectFirst) |
| highlightTyped | <code>Boolean</code> | Highlight matched part of the label |
| highlightClass | <code>String</code> | Class added to the mark label |
| fullWidth | <code>Boolean</code> | Match the width on the input field |
| fixed | <code>Boolean</code> | Use fixed positioning (solve overflow issues) |
| fuzzy | <code>Boolean</code> | Fuzzy search |
| startsWith | <code>Boolean</code> | Must start with the string. Defaults to false (it matches any position). |
| fillIn | <code>Boolean</code> | Show fill in icon. |
| preventBrowserAutocomplete | <code>Boolean</code> | Additional measures to prevent browser autocomplete |
| itemClass | <code>String</code> | Applied to the dropdown item. Accepts space separated classes. |
| activeClasses | <code>Array</code> | By default: ["bg-primary", "text-white"] |
| labelField | <code>String</code> | Key for the label |
| valueField | <code>String</code> | Key for the value |
| searchFields | <code>Array</code> | Key for the search |
| queryParam | <code>String</code> | Key for the query parameter for server |
| items | <code>Array</code> \| <code>Object</code> | An array of label/value objects or an object with key/values |
| source | <code>function</code> | A function that provides the list of items |
| hiddenInput | <code>Boolean</code> | Create an hidden input which stores the valueField |
| hiddenValue | <code>String</code> | Populate the initial hidden value. Mostly useful with liveServer. |
| clearControl | <code>String</code> | Selector that will clear the input on click. |
| datalist | <code>String</code> | The id of the source datalist |
| server | <code>String</code> | Endpoint for data provider |
| serverMethod | <code>String</code> | HTTP request method for data provider, default is GET |
| serverParams | <code>String</code> \| <code>Object</code> | Parameters to pass along to the server. You can specify a "related" key with the id of a related field. |
| serverDataKey | <code>String</code> | By default: data |
| fetchOptions | <code>Object</code> | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax) |
| liveServer | <code>Boolean</code> | Should the endpoint be called each time on input |
| noCache | <code>Boolean</code> | Prevent caching by appending a timestamp |
| debounceTime | <code>Number</code> | Debounce time for live server |
| notFoundMessage | <code>String</code> | Display a no suggestions found message. Leave empty to disable |
| onRenderItem | [<code>RenderCallback</code>](#RenderCallback) | Callback function that returns the label |
| onSelectItem | [<code>ItemCallback</code>](#ItemCallback) | Callback function to call on selection |
| onClearItem | [<code>ValueCallback</code>](#ValueCallback) | Callback function to call on clear |
| onServerResponse | [<code>ServerCallback</code>](#ServerCallback) | Callback function to process server response. Must return a Promise |
| onServerError | [<code>ErrorCallback</code>](#ErrorCallback) | Callback function to process server errors. |
| onChange | [<code>ItemCallback</code>](#ItemCallback) | Callback function to call on change-event. Returns currently selected item if any |
| onBeforeFetch | [<code>FetchCallback</code>](#FetchCallback) | Callback function before fetch |
| onAfterFetch | [<code>FetchCallback</code>](#FetchCallback) | Callback function after fetch |

## Callbacks

### RenderCallback ⇒ <code>string</code>

| Param | Type |
| ----- | ------------------------------------------ |
|-------|--------------------------------------------|
| item | <code>Object</code> |
| label | <code>String</code> |
| inst | [<code>Autocomplete</code>](#Autocomplete) |
Expand All @@ -107,16 +108,25 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti
### ItemCallback ⇒ <code>void</code>

| Param | Type |
| ----- | ------------------------------------------ |
|-------|--------------------------------------------|
| item | <code>Object</code> |
| inst | [<code>Autocomplete</code>](#Autocomplete) |

<a name="ServerCallback"></a>

## ValueCallback ⇒ <code>void</code>

| Param | Type |
| --- | --- |
| value | <code>String</code> |
| inst | [<code>Autocomplete</code>](#Autocomplete) |

<a name="ValueCallback"></a>

### ServerCallback ⇒ <code>Promise</code>

| Param | Type |
| -------- | ------------------------------------------ |
|----------|--------------------------------------------|
| response | <code>Response</code> |
| inst | [<code>Autocomplete</code>](#Autocomplete) |

Expand All @@ -125,7 +135,7 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti
## ErrorCallback ⇒ <code>void</code>

| Param | Type |
| ------ | ------------------------------------------ |
|--------|--------------------------------------------|
| e | <code>Error</code> |
| signal | <code>AbortSignal</code> |
| inst | [<code>Autocomplete</code>](#Autocomplete) |
Expand Down

0 comments on commit ce698b9

Please sign in to comment.