Skip to content

Commit

Permalink
Change item highlight to allow for any position sub string
Browse files Browse the repository at this point in the history 
Update demo
  • Loading branch information
Nii Yeboah committed Jun 22, 2020
1 parent 80d29bf commit 8576a18
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 97 deletions.
21 changes: 8 additions & 13 deletions demo/vcf-autocomplete-basic-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
<h3>Demo sample</h3>
<vaadin-demo-snippet id="vcf-autocomplete-demo-sample">
<template preserve-content>
<vcf-autocomplete id="demo1" label="Choose country" placeholder="Start typing a country name...">
</vcf-autocomplete>
<vcf-autocomplete id="demo1" label="Choose country" placeholder="Start typing a country name..."> </vcf-autocomplete>

<div>
Last applied value:
Expand All @@ -21,7 +20,7 @@ <h3>Demo sample</h3>
<script>
function getData(callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
xhr.onload = function () {
callback(JSON.parse(xhr.responseText));
};

Expand All @@ -32,7 +31,7 @@ <h3>Demo sample</h3>
xhr.send();
}

window.addDemoReadyListener('#vcf-autocomplete-demo-sample', function(document) {
window.addDemoReadyListener('#vcf-autocomplete-demo-sample', function (document) {
const autocompleteElement = document.querySelector('#demo1');
let countries = [];

Expand All @@ -42,7 +41,7 @@ <h3>Demo sample</h3>

autocompleteElement.addEventListener('value-changed', (ev) => {
if (countries.length) {
autocompleteElement.options = countries.filter(country => country.toLowerCase().indexOf(ev.detail.value.toLowerCase()) === 0);
autocompleteElement.options = countries.filter((country) => country.toLowerCase().indexOf(ev.detail.value.toLowerCase()) >= 0);
}
});

Expand All @@ -57,23 +56,19 @@ <h3>Demo sample</h3>
<h3>Slow API demo</h3>
<vaadin-demo-snippet id="vcf-autocomplete-demo-slow-api">
<template preserve-content>
<vcf-autocomplete
id="demo2"
label="Choose country"
placeholder="Start typing a country name...">
</vcf-autocomplete>
<vcf-autocomplete id="demo2" label="Choose country" placeholder="Start typing a country name..."> </vcf-autocomplete>

<script>
let countries = [];

function filterByValue(items, value) {
return items.filter(item => item.toLowerCase().indexOf(value.toLowerCase()) === 0);
return items.filter((item) => item.toLowerCase().indexOf(value.toLowerCase()) === 0);
}

function getDataDefer(callback, value) {
if (!countries.length) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
xhr.onload = function () {
countries = JSON.parse(xhr.responseText);

setTimeout(() => callback(filterByValue(countries, value)), 1000);
Expand All @@ -89,7 +84,7 @@ <h3>Slow API demo</h3>
}
}

window.addDemoReadyListener('#vcf-autocomplete-demo-slow-api', function(document) {
window.addDemoReadyListener('#vcf-autocomplete-demo-slow-api', function (document) {
const autocompleteElement = document.querySelector('#demo2');

autocompleteElement.addEventListener('value-changed', (ev) => {
Expand Down
156 changes: 72 additions & 84 deletions src/vcf-autocomplete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@
See <a href="https://vaadin.com/license/cval-3">the website</a> for the complete license.
-->

<link rel="import" href="../../polymer/polymer-element.html">
<link rel="import" href="../../polymer/lib/elements/dom-if.html">
<link rel="import" href="../../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
<link rel="import" href="../../vaadin-license-checker/vaadin-license-checker.html">
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../vaadin-text-field/vaadin-text-field.html">
<link rel="import" href="../../vaadin-list-box/vaadin-list-box.html">
<link rel="import" href="../../vaadin-item/vaadin-item.html">
<link rel="import" href="../../vaadin-button/vaadin-button.html">
<link rel="import" href="../../vaadin-lumo-styles/icons.html">
<link rel="import" href="../../iron-icon/iron-icon.html">
<link rel="import" href="vcf-autocomplete-overlay.html">
<link rel="import" href="../../polymer/polymer-element.html" />
<link rel="import" href="../../polymer/lib/elements/dom-if.html" />
<link rel="import" href="../../polymer/lib/elements/dom-repeat.html" />
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html" />
<link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html" />
<link rel="import" href="../../vaadin-license-checker/vaadin-license-checker.html" />
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html" />
<link rel="import" href="../../vaadin-text-field/vaadin-text-field.html" />
<link rel="import" href="../../vaadin-list-box/vaadin-list-box.html" />
<link rel="import" href="../../vaadin-item/vaadin-item.html" />
<link rel="import" href="../../vaadin-button/vaadin-button.html" />
<link rel="import" href="../../vaadin-lumo-styles/icons.html" />
<link rel="import" href="../../iron-icon/iron-icon.html" />
<link rel="import" href="vcf-autocomplete-overlay.html" />

<dom-module id="vcf-autocomplete">
<template>
Expand All @@ -32,84 +32,60 @@
pointer-events: auto;
}

[part="options-container"] {
[part='options-container'] {
min-width: var(--vcf-autocomplete-options-width);
}

[part="bold"] {
[part='bold'] {
font-weight: 600;
}

[part="loading-indicator"]::after {
[part='loading-indicator']::after {
content: 'Loading...';
}

[part="no-results"]::after {
[part='no-results']::after {
content: 'No results';
}
</style>

<vaadin-text-field
id="textField"
on-focus="_textFieldFocused"
label="[[label]]"
placeholder="[[placeholder]]">
<vaadin-text-field id="textField" on-focus="_textFieldFocused" label="[[label]]" placeholder="[[placeholder]]">
<template is="dom-if" if="[[_hasValue(value)]]">
<vaadin-button
part="clear"
theme="icon tertiary small"
aria-label="Add new item"
slot="suffix"
on-click="clear">

<iron-icon icon="lumo:cross">
</iron-icon>

<vaadin-button part="clear" theme="icon tertiary small" aria-label="Add new item" slot="suffix" on-click="clear">
<iron-icon icon="lumo:cross"> </iron-icon>
</vaadin-button>
</template>
</vaadin-text-field>

<vcf-autocomplete-overlay opened="{{opened}}">
<template>
<vaadin-list-box
part="options-container">

<vaadin-list-box part="options-container">
<template is="dom-if" if="[[!loading]]">
<template is="dom-repeat" items="[[_limitedOptions]]" as="option">
<vaadin-item
on-click="_optionClicked"
part="option">
<span part="bold">[[_getInputtedPart(value, option)]]</span>[[_getSuggestedPart(value, option)]]
<vaadin-item on-click="_optionClicked" part="option">
[[_getSuggestedStart(value, option)]]<span part="bold">[[_getInputtedPart(value, option)]]</span>[[_getSuggestedEnd(value, option)]]
</vaadin-item>
</template>
</template>

<template is="dom-if" if="[[_noResultsShown(options, loading)]]">
<vaadin-item
disabled
part="option">
<div part="no-results">
</div>
<vaadin-item disabled part="option">
<div part="no-results"></div>
</vaadin-item>
</template>

<template is="dom-if" if="[[loading]]">
<vaadin-item
disabled
part="option">
<div part="loading-indicator">
</div>
<vaadin-item disabled part="option">
<div part="loading-indicator"></div>
</vaadin-item>
</template>
</vaadin-list-box>

</template>
</vcf-autocomplete-overlay>

</template>

<script>
(function() {
(function () {
/**
* `<vcf-autocomplete>` is a template for vcf components.
*
Expand All @@ -122,9 +98,8 @@
* @demo demo/index.html
*/
class VcfAutocomplete extends Vaadin.ElementMixin(
Vaadin.ThemableMixin(
Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element))) {

Vaadin.ThemableMixin(Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element))
) {
static get is() {
return 'vcf-autocomplete';
}
Expand All @@ -135,45 +110,45 @@
type: Boolean,
reflectToAttribute: true,
value: false,
observer: '_openedChange'
observer: '_openedChange',
},

value: {
type: String,
notify: true,
observer: '_valueChange'
observer: '_valueChange',
},

options: {
type: Array,
value: () => []
value: () => [],
},

limit: {
type: Number,
value: 10
value: 10,
},

loading: {
type: Boolean,
reflectToAttribute: true,
value: false
value: false,
},

label: {
type: String
type: String,
},

placeholder: {
type: String
type: String,
},

_limitedOptions: {
type: Array
type: Array,
},

_savedValue: {
type: String
type: String,
},

_overlayElement: Object,
Expand All @@ -198,10 +173,7 @@
}

static get observers() {
return [
'_selectedOptionChanged(_selectedOption)',
'_optionsChange(options, options.splices)'
];
return ['_selectedOptionChanged(_selectedOption)', '_optionsChange(options, options.splices)'];
}

constructor() {
Expand Down Expand Up @@ -270,12 +242,14 @@
}

_applyValue(value) {
this.dispatchEvent(new CustomEvent('vcf-autocomplete-value-applied', {
bubbles: true,
detail: {
value: value
}
}));
this.dispatchEvent(
new CustomEvent('vcf-autocomplete-value-applied', {
bubbles: true,
detail: {
value: value,
},
})
);

this._changeTextFieldValue(value);
this.opened = false;
Expand All @@ -301,20 +275,32 @@
this.$.textField.focus();
}

_getSuggestedStart(value, option) {
if (!value) {
return;
}

return option.substr(0, this._getValueIndex(value, option));
}

_getInputtedPart(value, option) {
if (!value) {
return option;
}

return option.substr(0, value.length);
return option.substr(this._getValueIndex(value, option), value.length);
}

_getSuggestedPart(value, option) {
_getSuggestedEnd(value, option) {
if (!value) {
return;
}

return option.substr(value.length, option.length);
return option.substr(this._getValueIndex(value, option) + value.length, option.length);
}

_getValueIndex(value, option) {
return option.indexOf(value) >= 0 ? option.indexOf(value) : 0;
}

_onKeyDown(event) {
Expand Down Expand Up @@ -348,7 +334,7 @@
}

_navigate(to) {
const items = this._optionsContainer.items.filter(item => !item.disabled);
const items = this._optionsContainer.items.filter((item) => !item.disabled);

if (!items.length) {
return;
Expand Down Expand Up @@ -392,7 +378,7 @@
this._selectedOption = items[nextIndex];

return this._selectedOption.value;
// or restore the saved value
// or restore the saved value
} else {
this.$.textField.value = this._savedValue;

Expand All @@ -410,10 +396,12 @@

_changeTextFieldValue(newValue) {
this.$.textField.value = newValue;
this.$.textField.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true
}));
this.$.textField.dispatchEvent(
new Event('input', {
bubbles: true,
cancelable: true,
})
);
}

_onInput(event) {
Expand Down

0 comments on commit 8576a18

Please sign in to comment.