Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

feat(autocomplete): Editor & Filter autocomplete feature #101

Merged
merged 3 commits into from
Jan 10, 2019

Conversation

ghiscoding
Copy link
Owner

  • you can pass "collection", "collectionAsync" or your own datasource implementation
  • uses jQuery UI which is a SlickGrid dependency, so no lib added for this feature

List of things TODO

  • get a working demo with remote API
  • get a working demo with JSON files (objects or string types)
  • add SASS styling for the autocomplete
  • add way to provide an optional placeholder to tell user what to do

animated GIF of the Feature
w7eyr7qkvp

FilterArguments,
FilterCallback,
GridOption,
MultipleSelectOption,
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the MultipleSelectOption is not required here

this.searchTerms = args.searchTerms || [];

if (!this.grid || !this.columnDef || !this.columnFilter || (!this.columnFilter.collection && !this.columnFilter.collectionAsync && !this.columnFilter.filterOptions)) {
throw new Error(`[Angular-SlickGrid] You need to pass a "collection" (or "collectionAsync") for the MultipleSelect Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example:: { filter: model: Filters.multipleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] }`);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the error message shouldn't include anything about MultipleSelect

this.labelName = this.customStructure && this.customStructure.label || 'label';
this.valueName = this.customStructure && this.customStructure.value || 'value';

// always render the Select (dropdown) DOM element, even if user passed a "collectionAsync",
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove any reference to select dropdown

setValues(values: SearchTerm | SearchTerm[]) {
if (values) {
values = Array.isArray(values) ? values : [values];
this.$filterElm.multipleSelect('setSelects', values);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replace the setValues() with same code as the inputFilter

collection = getDescendantProperty(collection, this.collectionOptions.collectionInObjectProperty);
}
if (!Array.isArray(collection)) {
throw new Error('Something went wrong while trying to pull the collection from the "collectionAsync" call in the Select Filter, the collection is not a valid array.');
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again remove reference to Select Filter

@ghiscoding ghiscoding merged commit 21482b7 into master Jan 10, 2019
@ghiscoding ghiscoding deleted the feat/autocomplete branch February 9, 2019 21:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant