Ngx-chips: autocompleteObservable add [allowEmptySearch]

[djleonskennedy]

Hello

Our API allows search all items if requested text is empty string, Will you plan to add [allowEmptySearch] in autocompleteObservable mode with disable trimming?

https://github.com/Gbuomprisco/ng2-tag-input/blob/master/modules/components/dropdown/tag-input-dropdown.component.ts#L154

[Gbuomprisco]

Hi @djleonskennedy,

maybe an attribute like [minLength] (default to 1) may be generic and nice to have?

[djleonskennedy]

@Gbuomprisco Yes, it'd be cool.

Could you clarify, is there any workarounds to hack it ?

[Gbuomprisco]

Mhm only way I see it is avoid using the autocompleteObservable and update the autocompleteItems manually

[djleonskennedy]

@Gbuomprisco Ok, thank you for support

[djleonskennedy]

@Gbuomprisco no way to use autocompleteItems in my case, will wait update

[Gbuomprisco]

In theory you could subscribe to (onTextChange) and update the autocompleteItems

[djleonskennedy]

@Gbuomprisco Thank you, it works fine

[djleonskennedy]

@Gbuomprisco and small addition:
here is my code

  public ngOnInit() {
    this.getDropDownList$
      .switchMap(({text, typeName, isName}) =>
        this.api.getDropdownOptions(typeName, text, isName)
      ).subscribe(this.setItems);
  }

  private setItems(items) {
    this.autoCompleteItems = items;
  }

  private resetItems() {
    this.autoCompleteItems = [];
  }

it works, however some times autocomplete isn't appears after component init
and i need two clicks to call it

Could you advise what is reason can be?

Thank you

[Gbuomprisco]

You may want to call tagInput.dropdown.show() (note: you need to register #tagInput) manually in that case, as during the first cycle the autocomplete will likely match against the old autocomplete items.

[Gbuomprisco]

Hi @djleonskennedy,

version 0.9.8 should address this. Basically now it respects the value defined in [minimumTextLength]. Let me know if it works well with you :)

[djleonskennedy]

@Gbuomprisco all now works, however could you clarify how to trigger fetching of an observable by click on input or onFocus

[Gbuomprisco]

sorry this may require another change on my side :|

[djleonskennedy]

@Gbuomprisco for now i fixed this like :)

[Gbuomprisco]

smart @djleonskennedy :)

[R-iskey]

@djleonskennedy Hi, please can you show me your getDropDownList function ?

[R-iskey]

Hi @Gbuomprisco, I have a question about _autocompleteObservable_ method.
How can I call a service async method in autocompleteObservable function, now I can't because _this_ context of autocompleteObservable function is TagInputComponent, not my custom

[Gbuomprisco]

use an arrow function to retain the scope, see the examples I've made

[R-iskey]

@Gbuomprisco Thx, now it's work fine, but have other issue.
This is my code example:

<tag-input
                #tagInput
                [ngModel]="selectedItems" 
                [identifyBy]="'value'" [displayBy]="'label'" 
                [editable]='allowCustom'
                [onlyFromAutocomplete]="!allowCustom"
                (onSelect)="onSelected($event)"
                (onRemove)="onItemRemoved($event)"
                (onTextChange)="onTextChange($event)">
            <tag-input-dropdown 
                    [autocompleteItems]="allowedTags"
                    [autocompleteObservable]='autocompleteLookup'
                    [showDropdownIfEmpty]="true">
                <ng-template let-item="item" let-index="index">
                    <!--Custom template-->
                    {{ index }}: {{ item.label }}
                </ng-template>
            </tag-input-dropdown>
</tag-input>

I set [identifyBy]="'value'" [displayBy]="'label'" , but tag-input throw error:
_Cannot read property 'toString' of undefined_.
I look into component and found the reason, identifyBy and displayBy default values not changed.

[Gbuomprisco]

You probably need to add them to tag-input-dropdown. Read the documentation carefully and see the results examples, they cover most situations

[R-iskey]

ok thanks, but in documentation I follow this example
https://github.com/Gbuomprisco/ngx-chips#using-an-array-of-with-custom-identifyby-and-displayby