Darren Jennings](https://darrenjennings.github.io)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") | [
Evgeniy Kulish](https://github.com/ekulish)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Code") [🎨](#design-ekulish "Design") [💡](#example-ekulish "Examples") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Tests") | [
Scott Smith](https://github.com/scottadamsmith)
[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith "Bug reports") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Tests") | [
Fernando Machuca](https://github.com/chuca)
[🎨](#design-chuca "Design") | [
BerniML](https://github.com/BerniML)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Tests") | [
Kristoffer Nordström](https://github.com/42tte)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Tests") | +| [
Darren Jennings](https://darrenjennings.github.io)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Documentation") [🚇](#infra-darrenjennings "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=darrenjennings "Tests") [🎨](#design-darrenjennings "Design") [💡](#example-darrenjennings "Examples") | [
Evgeniy Kulish](https://github.com/ekulish)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Code") [🎨](#design-ekulish "Design") [💡](#example-ekulish "Examples") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=ekulish "Tests") | [
Scott Smith](https://github.com/scottadamsmith)
[🐛](https://github.com/darrenjennings/vue-autosuggest/issues?q=author%3Ascottadamsmith "Bug reports") [💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=scottadamsmith "Tests") | [
Fernando Machuca](https://github.com/chuca)
[🎨](#design-chuca "Design") | [
BerniML](https://github.com/BerniML)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=BerniML "Tests") | [
Kristoffer Nordström](https://github.com/42tte)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Code") [⚠️](https://github.com/darrenjennings/vue-autosuggest/commits?author=42tte "Tests") | [
Vivek Ashokan](https://github.com/vivekitis)
[💻](https://github.com/darrenjennings/vue-autosuggest/commits?author=vivekitis "Code") [📖](https://github.com/darrenjennings/vue-autosuggest/commits?author=vivekitis "Documentation") [💡](#example-vivekitis "Examples") | | :---: | :---: | :---: | :---: | :---: | :---: | diff --git a/__tests__/__snapshots__/autosuggest.test.js.snap b/__tests__/__snapshots__/autosuggest.test.js.snap index c1a778a..ab973f2 100644 --- a/__tests__/__snapshots__/autosuggest.test.js.snap +++ b/__tests__/__snapshots__/autosuggest.test.js.snap @@ -18,65 +18,70 @@ exports[`Autosuggest can click outside document to trigger close 1`] = ` `; +exports[`Autosuggest can customize class for highlighted element 1`] = ` +
+
+
+`;
+
exports[`Autosuggest can customize css prefix 1`] = `
+
+
+
+ -
+
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math +
-
+
- spike +
- bud +
- rover +
-
+
- sassy +
- tuesday +
- church +
-
+
- elephant +
- lion +
-
+
- something +
- something2 +
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - spike - -
- - bud - -
- - rover - +
- spike +
- bud +
- rover
-
-
- - sassy - -
- - tuesday - -
- - church - +
- sassy +
- tuesday +
- church
-
-
- - elephant - -
- - lion - +
- elephant +
- lion
-
-
- - something - -
- - something2 - +
- something +
- something2
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - spike - -
- - bud - -
- - rover - +
- spike +
- bud +
- rover
-
-
- - sassy - -
- - tuesday - -
- - church - +
- sassy +
- tuesday +
- church
-
-
- - elephant - -
- - lion - +
- elephant +
- lion
-
-
- - something - -
- - something2 - +
- something +
- something2
- Suggestions -
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - spike - -
- - bud - -
- - rover - +
- spike +
- bud +
- rover
-
-
- - sassy - -
- - tuesday - -
- - church - +
- sassy +
- tuesday +
- church
-
-
- - elephant - -
- - lion - +
- elephant +
- lion
-
-
- - something - -
- - something2 - +
- something +
- something2
- Suggestions -
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
- The Dogs -
- - spike - -
- - bud - -
- - rover - +
- spike +
- bud +
- rover
- Moar Cats is good -
- - sassy - -
- - tuesday - -
- - church - +
- sassy +
- tuesday +
- church
- zoo animals? -
- - elephant - -
- - lion - +
- elephant +
- lion
- uhh -
- - something - -
- - something2 - +
- something +
- something2
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - -
- - magic school bus - -
- - math mammoth light blue - -
- - handwriting - -
- - math - -
- - minecraft - -
- - free worksheets - -
- - 4th grade - -
- - snap circuits - -
- - bath toys - -
- - channies - -
- - fred - -
- - lego - -
- - math life of fred - -
- - multiplication - -
- - thinking tree - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math +
- magic school bus +
- math mammoth light blue +
- handwriting +
- math +
- minecraft +
- free worksheets +
- 4th grade +
- snap circuits +
- bath toys +
- channies +
- fred +
- lego +
- math life of fred +
- multiplication +
- thinking tree
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
-
-
- - spike - -
- - bud - -
- - rover - +
- spike +
- bud +
- rover
-
-
- - sassy - -
- - tuesday - -
- - church - +
- sassy +
- tuesday +
- church
-
-
- - elephant - -
- - lion - +
- elephant +
- lion
-
-
- - something - -
- - something2 - +
- something +
- something2
- Suggestions -
- - clifford kits - -
- - friendly chemistry - -
- - phonics - -
- - life of fred - -
- - life of fred math - +
- clifford kits +
- friendly chemistry +
- phonics +
- life of fred +
- life of fred math
+ components: { Autosuggest },
+ template: `
`,
- data() {
- return {
- selected: "",
- limit: 10,
- query: '',
- options: [
- {
- data: sharedData.options
- }
- ],
- inputProps: {
- id: "autosuggest__input",
- placeholder: "Type 'g'"
+ data() {
+ return {
+ selected: "",
+ limit: 10,
+ query: '',
+ options: [
+ {
+ data: sharedData.options
+ }
+ ],
+ inputProps: {
+ id: "autosuggest__input",
+ placeholder: "Type 'g'"
+ }
+ };
+ },
+ computed: {
+ filteredOptions() {
+ const suggestionsData = this.options[0].data.filter(item => {
+ return item.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
+ });
+
+ return [
+ {
+ label: "Section 1",
+ data: suggestionsData,
+ limit: 2
+ },
+ {
+ label: "Section 2",
+ data: suggestionsData.map(a => `${a} ${this.rando()}`)
+ .concat(suggestionsData.map(a => `${a} ${this.rando()}`))
+ .concat(suggestionsData.map(a => `${a} ${this.rando()}`))
}
- };
+ ]
+ }
+ },
+ methods: {
+ rando() {
+ return Math.floor(Math.random() * (100 - 1)) + 1
},
- computed: {
- filteredOptions() {
- const suggestionsData = this.options[0].data.filter(item => {
- return item.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
- });
+ onSelected(item) {
+ action('Selected')(item.item)
- return [
- {
- label: "Section 1",
- data: suggestionsData,
- limit: 2
- },
- {
- label: "Section 2",
- data: suggestionsData.map(a => `${a} ${this.rando()}` )
- .concat(suggestionsData.map(a => `${a} ${this.rando()}`))
- .concat(suggestionsData.map(a => `${a} ${this.rando()}`))
- }
- ]
- }
+ this.query = item.item
},
- methods: {
- rando(){
- return Math.floor(Math.random() * (100 - 1)) + 1
+ onInputChange(text) {
+ action('onInputChange')(text)
+ if (text === null) {
+ return;
+ }
+ this.query = text
+ }
+ }
+ }))
+ .add("custom highlight class", () => ({
+ components: { Autosuggest },
+ template: `
You have selected {{selected}}
+
`,
+ data() {
+ return {
+ selected: "",
+ filteredOptions: [],
+ options: [{ data: sharedData.options.slice(0, 10) }],
+ inputProps: {
+ id: "autosuggest__input",
+ placeholder: "Type 'e'"
},
- onSelected(item) {
- action('Selected')(item.item)
-
- this.query = item.item
+ componentAttrClassAutosuggestItemHighlight: 'highlightAutoItem',
+ onSelected: item => {
+ action("Selected")(item)
+ this.selected = item;
+ }
+ };
+ },
+ methods: sharedData.methods
+ }))
+ .add("multiple instances with custom highlight class", () => ({
+ components: { Autosuggest },
+ template: `
+ You have selected '{{selected}}'
+
+
+
+
+ `,
+ data() {
+ return {
+ selected: [],
+ limit: 10,
+ filteredOptions: {
+ 0: [],
+ 1: [],
+ 2: []
},
- onInputChange(text) {
- action('onInputChange')(text)
- if (text === null) {
- return;
+ options: [
+ {
+ data: [...sharedData.options]
}
- this.query = text
+ ],
+ inputProps: {
+ id: "autosuggest__input",
+ onClick: this.onClick,
+ placeholder: "Type 'g'"
+ },
+ componentAttrClassAutosuggestItemHighlight: 'highlightAutoItem',
+ };
+ },
+ methods: {
+ onInputChange(text, index) {
+ action('onInputChange')(text)
+ if (text === null) {
+ return;
}
+ const filteredData = this.options[0].data.filter(item => {
+ return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
+ });
+
+ this.filteredOptions[index] = [{ data: filteredData }];
}
- }));
+ }
+ }))
+ ;
+
+ Tab throw each component and use arrow keys to test isolation of functionality.
+
+
+
+
+
+
+
+
+