From 6e438e0eff7c834a788da0fb1caa913a46a48803 Mon Sep 17 00:00:00 2001 From: Rob Peters Date: Wed, 17 Oct 2018 11:12:24 +0200 Subject: [PATCH 1/7] Add model to resultItem Merge pull request #1 from rpapeters/v3.8.0 Add model to resultItem Add showSuggestions function --- paper-autocomplete-suggestions.html | 6 ++++++ paper-autocomplete.html | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/paper-autocomplete-suggestions.html b/paper-autocomplete-suggestions.html index 2207901..4fb1589 100644 --- a/paper-autocomplete-suggestions.html +++ b/paper-autocomplete-suggestions.html @@ -894,6 +894,11 @@ }.bind(this), 0); }, + showSuggestions: function (query) { + query = query || ''; + this._suggestions = this.queryFn(this.source, query.toLowerCase()); + }, + /** * Query function is called on each keystroke to query the data source and returns the suggestions that matches * with the filtering logic included. @@ -921,6 +926,7 @@ var resultItem = {}; resultItem[this.textProperty] = objText; resultItem[this.valueProperty] = objValue; + resultItem.model = item; queryResult.push(resultItem); } }.bind(this)); diff --git a/paper-autocomplete.html b/paper-autocomplete.html index 838da6d..610cd2e 100644 --- a/paper-autocomplete.html +++ b/paper-autocomplete.html @@ -697,6 +697,13 @@ this.$.paperAutocompleteSuggestions.hideSuggestions(); }, + showSuggestions: function (query) { + if (query && this.$.autocompleteInput.value != query) { + this.$.autocompleteInput.value = query; + } + this.$.paperAutocompleteSuggestions.showSuggestions(query); + }, + /** * Allows calling the onSelect function from outside * This in time triggers the autocomplete-selected event From a005bcbd0c895d3403604a7de215c53fd0bccf05 Mon Sep 17 00:00:00 2001 From: Rob Peters Date: Wed, 17 Oct 2018 12:50:17 +0200 Subject: [PATCH 2/7] Enhance keyboard handling --- paper-autocomplete-suggestions.html | 34 ++++++++++++++++++++++++----- paper-autocomplete.html | 4 ++-- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/paper-autocomplete-suggestions.html b/paper-autocomplete-suggestions.html index 4fb1589..9b2ebe2 100644 --- a/paper-autocomplete-suggestions.html +++ b/paper-autocomplete-suggestions.html @@ -128,7 +128,7 @@ paper-material { display: none; position: absolute; - width: 100%; + min-width: 100%; z-index: 1000; background-color: white; max-height: 252px; @@ -140,7 +140,7 @@ paper-item, :host ::slotted(paper-item) { min-height: var(--paper-item-min-height, 36px); - padding: 0 16px; + padding: 4px 16px; position: relative; line-height: 18px; @@ -160,6 +160,12 @@ color: #333; } + div.item-text { + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + } + /** * IE11 paper-item min-height bug: https://github.com/PolymerElements/paper-item/issues/35 */ @@ -177,7 +183,7 @@ @@ -201,7 +207,9 @@ UP_ARROW: 38, DOWN_ARROW: 40, ENTER: 13, - ESCAPE: 27 + ESCAPE: 27, + TAB: 9, + SHIFT: 16 }; Polymer({ @@ -418,6 +426,7 @@ ready: function () { this._value = this.value; + this.__lastQuery = ''; // This is important to be able to access component methods inside the templates used with Templatizer this.dataHost = this; @@ -569,6 +578,7 @@ var isPolymer1 = !Polymer.Element; this._clearSuggestions(); + this._calcMaxWidth(); [].slice.call(suggestions).forEach(function (result, index) { // clone the template and bind with the model @@ -592,6 +602,10 @@ while (last = suggestionsContainer.lastChild) suggestionsContainer.removeChild(last); }, + _calcMaxWidth: function() { + this.$.suggestionsWrapper.style.maxWidth = `${window.innerWidth - this.getBoundingClientRect().left - 16}px`; + }, + /** * Listener to changes to _suggestions state */ @@ -635,6 +649,7 @@ this._value = this.value; this._text = this.text; this._emptyItems(); + this.__lastQuery = ''; this._fireEvent(selectedOption, 'selected'); @@ -680,7 +695,11 @@ switch (keyCode) { case KEY_CODES.DOWN_ARROW: - this._moveHighlighted(DIRECTION.DOWN); + if (this.isOpen) { + this._moveHighlighted(DIRECTION.DOWN); + } else { + this.showSuggestions(); + } break; case KEY_CODES.UP_ARROW: this._moveHighlighted(DIRECTION.UP); @@ -695,6 +714,8 @@ case KEY_CODES.LEFT_ARROW: // fall through case KEY_CODES.RIGHT_ARROW: + case KEY_CODES.TAB: + case KEY_CODES.SHIFT: break; default: this._handleSuggestions(event); @@ -895,7 +916,7 @@ }, showSuggestions: function (query) { - query = query || ''; + query = query === null ? '' : query === undefined ? this.__lastQuery : query; this._suggestions = this.queryFn(this.source, query.toLowerCase()); }, @@ -908,6 +929,7 @@ */ queryFn: function (datasource, query) { var queryResult = []; + this.__lastQuery = query; datasource.forEach(function (item) { var objText, objValue; diff --git a/paper-autocomplete.html b/paper-autocomplete.html index 610cd2e..2f0e28b 100644 --- a/paper-autocomplete.html +++ b/paper-autocomplete.html @@ -698,8 +698,8 @@ }, showSuggestions: function (query) { - if (query && this.$.autocompleteInput.value != query) { - this.$.autocompleteInput.value = query; + if (query !== undefined && this.$.autocompleteInput.value != query) { + this.$.autocompleteInput.value = query === null ? '' : query; } this.$.paperAutocompleteSuggestions.showSuggestions(query); }, From 77fb7d8f128adcf318ae1e06c4572e46de786967 Mon Sep 17 00:00:00 2001 From: lenaertst89 Date: Mon, 3 Jun 2019 16:07:09 +0200 Subject: [PATCH 3/7] Added highlighting (bold / primary-color) to matching text in paper-items (#3) --- paper-autocomplete-suggestions.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/paper-autocomplete-suggestions.html b/paper-autocomplete-suggestions.html index 9b2ebe2..a1e0ee1 100644 --- a/paper-autocomplete-suggestions.html +++ b/paper-autocomplete-suggestions.html @@ -634,6 +634,17 @@ } } + var items = this.$.suggestionsWrapper.querySelectorAll('.item-text'), + searchText = this._input.value.toLowerCase(); + items.forEach(item => { + var matchStart = item.innerText.toLowerCase().indexOf("" + searchText + ""); + var matchEnd = matchStart + searchText.length - 1; + var beforeMatch = item.innerText.slice(0, matchStart); + var matchText = item.innerText.slice(matchStart, matchEnd + 1); + var afterMatch = item.innerText.slice(matchEnd + 1); + item.innerHTML = `${beforeMatch}${matchText}${afterMatch}`; + }); + if (this.highlightFirst) { this._moveHighlighted(DIRECTION.DOWN); } From 53a5268b0ae5d228f7cb78da2cbf78ddc1269865 Mon Sep 17 00:00:00 2001 From: Rob Peters Date: Tue, 18 Feb 2020 12:02:08 +0100 Subject: [PATCH 4/7] Upgrade to P3 --- CHANGELOG.md | 14 + README.md | 18 +- analysis.json | 3429 +++ bower.json | 95 - demo/account-autocomplete.html | 175 - demo/account-autocomplete.js | 174 + demo/index.html | 226 +- demo/paper-autocomplete-suggestions-demo.html | 30 +- index.html | 4 +- package-lock.json | 22822 ++++++++++++++++ package.json | 143 +- paper-autocomplete-suggestions.html | 1021 - paper-autocomplete-suggestions.js | 1033 + paper-autocomplete.html | 767 - paper-autocomplete.js | 741 + polymer.json | 6 + test/.eslintrc | 11 - test/.eslintrc.json | 3 + test/index.html | 16 +- test/paper-autocomplete_test_local.html | 691 +- ...-autocomplete_test_local_customsource.html | 708 +- test/paper-autocomplete_test_multi.html | 105 +- wct.conf.js | 89 +- 23 files changed, 29278 insertions(+), 3043 deletions(-) create mode 100644 analysis.json delete mode 100755 bower.json delete mode 100644 demo/account-autocomplete.html create mode 100644 demo/account-autocomplete.js create mode 100644 package-lock.json delete mode 100644 paper-autocomplete-suggestions.html create mode 100644 paper-autocomplete-suggestions.js delete mode 100644 paper-autocomplete.html create mode 100644 paper-autocomplete.js create mode 100644 polymer.json delete mode 100644 test/.eslintrc create mode 100644 test/.eslintrc.json diff --git a/CHANGELOG.md b/CHANGELOG.md index ae794b2..7e14d59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +## [4.0.4](https://github.com/Neovici/paper-autocomplete/compare/v4.0.3...v4.0.4) (2020-01-28) + + +### Bug Fixes + +* show suggestions also when value is null ([#18](https://github.com/Neovici/paper-autocomplete/issues/18)) ([0f37347](https://github.com/Neovici/paper-autocomplete/commit/0f37347)) + +## [4.0.3](https://github.com/Neovici/paper-autocomplete/compare/v4.0.2...v4.0.3) (2019-10-09) + + +### Bug Fixes + +* **ci:** adopt semantic release ([0f9d5d5](https://github.com/Neovici/paper-autocomplete/commit/0f9d5d5)) + # Changelog This component follows *Semantic Versioning* (aka SemVer), visit (http://semver.org/) to learn more about it. diff --git a/README.md b/README.md index b51979b..6b81fdd 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,16 @@ # paper-autocomplete -> Autocomplete component compatible with Polymer 1.x and 2.x +> Autocomplete component compatible with Polymer 3.x [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ellipticaljs/paper-autocomplete) -[![Sauce Test Status](https://saucelabs.com/browser-matrix/jhuesos.svg)](https://saucelabs.com/u/jhuesos) +[![Build Status](https://github.com/Neovici/paper-autocomplete/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/paper-autocomplete/actions?workflow=Github+CI) -`paper-autocomplete` extends earlier efforts such as this -[https://github.com/rodo1111/paper-input-autocomplete](https://github.com/rodo1111/paper-input-autocomplete) to provide -keyboard support, remote binding and results scrolling. +[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) -# About Polymer 1.x and 2.x Compatibility -From version `3.x.x`, this component work with both Polymer 1.7+ or Polymer 2.0+ Please take a look to the -[MIGRATION.md](./MIGRATION.md) file that contains more information. +`paper-autocomplete` extends earlier efforts such as this +[https://github.com/rodo1111/paper-input-autocomplete](https://github.com/rodo1111/paper-input-autocomplete) to provide +keyboard support, remote binding and results scrolling. # Installation @@ -36,13 +34,13 @@ bower install paper-autocomplete http://ellipticaljs.github.io/paper-autocomplete/ -**Important: The demos only work with browers which are ES2015/ES6 compatible.**. This component is compatible with older +**Important: The demos only work with browers which are ES2015/ES6 compatible.**. This component is compatible with older browsers as well, but the code need to be transpiled to ES5. `polymer build` and `polymer serve` can do that for you. This code from this page is not transpiled. # Want to contribute? -Check out our [Contributing guide](./CONTRIBUTING.md)! +Check out our [Contributing guide](./CONTRIBUTING.md)! # For Developers diff --git a/analysis.json b/analysis.json new file mode 100644 index 0000000..567aafa --- /dev/null +++ b/analysis.json @@ -0,0 +1,3429 @@ +{ + "schema_version": "1.0.0", + "elements": [ + { + "description": "`paper-autocomplete-suggestions`\n\n*From v4.x.x, this component only works with Polymer 3.**\n\n [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/ellipticaljs/paper-autocomplete)\n\n Allows to add autocomplete capabilities to any input field. This is desirable when you have an input field with custom\n logic and you just want to add the feature to help users with the selection. If you want to use it in combination with\n a regular ``, you can use ``.\n\n Example:\n ```\n
\n \n\n \n
\n ```\n\n It is **important to provide both `textProperty` and `valueProperty` when working with a custom search function and\n or custom templates.** They are needed to keep the component accessible and for the events (e.g. onSelect) to keep\n working.\n\n ### About Polymer 1.x and 2.x Compatibility\n From version `3.x.x`, this component work with both Polymer 1.7+ or Polymer 2.0+ Please take a look to the\n [MIGRATION.md](./MIGRATION.md) file that contains more information.\n\n ### Custom search\n This component has the public method `queryFn` that is called in each key stroke and it is responsible to query\n all items in the `source` and returns only those items that matches certain filtering criteria. By default, this\n component search for items that start with the recent query (case insensitive).\n You can override this behavior providing your own query function, as long as these two requirements are fulfill:\n\n - The query function is synchronous.\n - The API is respected and the method always return an Array.\n\n The template use to render each suggestion depends on the structure of each object that this method returns. For the\n default template, each suggestion should follow this object structure:\n\n ```\n {\n text: objText,\n value: objValue\n }\n ```\n\n This function is only used when a local data source is used. When using a `remoteDataSource` user is responsible of\n doing the search and specify suggestions manually.\n\n ### Custom templates\n A template for each suggestion can be provided, but for now, there are limitations in the way you can customize\n the template. Please read the the following sections carefully.\n In order to set your own template, you need to add a `