From ce698b9f6f615982dfaa7463fee280747041671e Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 27 Nov 2024 12:11:20 +0100 Subject: [PATCH] add on clear item --- .editorconfig | 28 +++++++++++++ autocomplete.js | 13 ++++++ readme.md | 108 ++++++++++++++++++++++++++---------------------- 3 files changed, 100 insertions(+), 49 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4e6416a --- /dev/null +++ b/.editorconfig @@ -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 diff --git a/autocomplete.js b/autocomplete.js index f6dde75..230ef8a 100644 --- a/autocomplete.js +++ b/autocomplete.js @@ -21,6 +21,13 @@ * @returns {void} */ +/** + * @callback ValueCallback + * @param {String} value + * @param {Autocomplete} inst + * @returns {void} + */ + /** * @callback ServerCallback * @param {Response} response @@ -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 @@ -133,6 +141,7 @@ const DEFAULTS = { return label; }, onSelectItem: (item, inst) => {}, + onClearItem: (item, inst) => {}, onServerResponse: (response, inst) => { return response.json(); }, @@ -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 diff --git a/readme.md b/readme.md index 545085c..3c19493 100644 --- a/readme.md +++ b/readme.md @@ -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 | Boolean | Show all suggestions even if they don't match | -| suggestionsThreshold | Number | Number of chars required to show suggestions | -| maximumItems | Number | Maximum number of items to display | -| autoselectFirst | Boolean | Always select the first item | -| ignoreEnter | Boolean | Ignore enter if no items are selected (play nicely with autoselectFirst=0) | -| tabSelect | Boolean | Tab will trigger selection if active | -| updateOnSelect | Boolean | Update input value on selection (doesn't play nice with autoselectFirst) | -| highlightTyped | Boolean | Highlight matched part of the label | -| highlightClass | String | Class added to the mark label | -| fullWidth | Boolean | Match the width on the input field | -| fixed | Boolean | Use fixed positioning (solve overflow issues) | -| fuzzy | Boolean | Fuzzy search | -| startsWith | Boolean | Must start with the string. Defaults to false (it matches any position). | -| fillIn | Boolean | Show fill in icon. | -| preventBrowserAutocomplete | Boolean | Additional measures to prevent browser autocomplete | -| itemClass | String | Applied to the dropdown item. Accepts space separated classes. | -| activeClasses | Array | By default: ["bg-primary", "text-white"] | -| labelField | String | Key for the label | -| valueField | String | Key for the value | -| searchFields | Array | Key for the search | -| queryParam | String | Key for the query parameter for server | -| items | Array \| Object | An array of label/value objects or an object with key/values | -| source | function | A function that provides the list of items | -| hiddenInput | Boolean | Create an hidden input which stores the valueField | -| hiddenValue | String | Populate the initial hidden value. Mostly useful with liveServer. | -| clearControl | String | Selector that will clear the input on click. | -| datalist | String | The id of the source datalist | -| server | String | Endpoint for data provider | -| serverMethod | String | HTTP request method for data provider, default is GET | -| serverParams | String \| Object | Parameters to pass along to the server. You can specify a "related" key with the id of a related field. | -| serverDataKey | String | By default: data | -| fetchOptions | Object | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax) | -| liveServer | Boolean | Should the endpoint be called each time on input | -| noCache | Boolean | Prevent caching by appending a timestamp | -| debounceTime | Number | Debounce time for live server | -| notFoundMessage | String | Display a no suggestions found message. Leave empty to disable | -| onRenderItem | [RenderCallback](#RenderCallback) | Callback function that returns the label | -| onSelectItem | [ItemCallback](#ItemCallback) | Callback function to call on selection | -| onServerResponse | [ServerCallback](#ServerCallback) | Callback function to process server response. Must return a Promise | -| onServerError | [ErrorCallback](#ErrorCallback) | Callback function to process server errors. | -| onChange | [ItemCallback](#ItemCallback) | Callback function to call on change-event. Returns currently selected item if any | -| onBeforeFetch | [FetchCallback](#FetchCallback) | Callback function before fetch | -| onAfterFetch | [FetchCallback](#FetchCallback) | Callback function after fetch | +| Name | Type | Description | +| --- | --- | --- | +| showAllSuggestions | Boolean | Show all suggestions even if they don't match | +| suggestionsThreshold | Number | Number of chars required to show suggestions | +| maximumItems | Number | Maximum number of items to display | +| autoselectFirst | Boolean | Always select the first item | +| ignoreEnter | Boolean | Ignore enter if no items are selected (play nicely with autoselectFirst=0) | +| tabSelect | Boolean | Tab will trigger selection if active | +| updateOnSelect | Boolean | Update input value on selection (doesn't play nice with autoselectFirst) | +| highlightTyped | Boolean | Highlight matched part of the label | +| highlightClass | String | Class added to the mark label | +| fullWidth | Boolean | Match the width on the input field | +| fixed | Boolean | Use fixed positioning (solve overflow issues) | +| fuzzy | Boolean | Fuzzy search | +| startsWith | Boolean | Must start with the string. Defaults to false (it matches any position). | +| fillIn | Boolean | Show fill in icon. | +| preventBrowserAutocomplete | Boolean | Additional measures to prevent browser autocomplete | +| itemClass | String | Applied to the dropdown item. Accepts space separated classes. | +| activeClasses | Array | By default: ["bg-primary", "text-white"] | +| labelField | String | Key for the label | +| valueField | String | Key for the value | +| searchFields | Array | Key for the search | +| queryParam | String | Key for the query parameter for server | +| items | Array \| Object | An array of label/value objects or an object with key/values | +| source | function | A function that provides the list of items | +| hiddenInput | Boolean | Create an hidden input which stores the valueField | +| hiddenValue | String | Populate the initial hidden value. Mostly useful with liveServer. | +| clearControl | String | Selector that will clear the input on click. | +| datalist | String | The id of the source datalist | +| server | String | Endpoint for data provider | +| serverMethod | String | HTTP request method for data provider, default is GET | +| serverParams | String \| Object | Parameters to pass along to the server. You can specify a "related" key with the id of a related field. | +| serverDataKey | String | By default: data | +| fetchOptions | Object | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax) | +| liveServer | Boolean | Should the endpoint be called each time on input | +| noCache | Boolean | Prevent caching by appending a timestamp | +| debounceTime | Number | Debounce time for live server | +| notFoundMessage | String | Display a no suggestions found message. Leave empty to disable | +| onRenderItem | [RenderCallback](#RenderCallback) | Callback function that returns the label | +| onSelectItem | [ItemCallback](#ItemCallback) | Callback function to call on selection | +| onClearItem | [ValueCallback](#ValueCallback) | Callback function to call on clear | +| onServerResponse | [ServerCallback](#ServerCallback) | Callback function to process server response. Must return a Promise | +| onServerError | [ErrorCallback](#ErrorCallback) | Callback function to process server errors. | +| onChange | [ItemCallback](#ItemCallback) | Callback function to call on change-event. Returns currently selected item if any | +| onBeforeFetch | [FetchCallback](#FetchCallback) | Callback function before fetch | +| onAfterFetch | [FetchCallback](#FetchCallback) | Callback function after fetch | ## Callbacks ### RenderCallback ⇒ string | Param | Type | -| ----- | ------------------------------------------ | +|-------|--------------------------------------------| | item | Object | | label | String | | inst | [Autocomplete](#Autocomplete) | @@ -107,16 +108,25 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti ### ItemCallback ⇒ void | Param | Type | -| ----- | ------------------------------------------ | +|-------|--------------------------------------------| | item | Object | | inst | [Autocomplete](#Autocomplete) | +## ValueCallback ⇒ void + +| Param | Type | +| --- | --- | +| value | String | +| inst | [Autocomplete](#Autocomplete) | + + + ### ServerCallback ⇒ Promise | Param | Type | -| -------- | ------------------------------------------ | +|----------|--------------------------------------------| | response | Response | | inst | [Autocomplete](#Autocomplete) | @@ -125,7 +135,7 @@ Options can be either passed to the constructor (eg: optionName) or in data-opti ## ErrorCallback ⇒ void | Param | Type | -| ------ | ------------------------------------------ | +|--------|--------------------------------------------| | e | Error | | signal | AbortSignal | | inst | [Autocomplete](#Autocomplete) |