Simulate autocomplete cancel button


Topic: Simulate autocomplete cancel button

bitjuice pro asked 5 years ago

Hi,

I need to simulate mdb-auto-completer clearBtnClicked behavior on typescript file. In others words I need to reset input field programmatically (and hide 'x' button on it).

How can I do it?

Thanks

Marco


Arkadiusz Idzikowski staff commented 5 years ago

Unfortunately, currently it's not possible to clear this field programatically. We will add a public method for that.


bitjuice pro commented 5 years ago

Thanks Arkadiusz


bitjuice pro answered 5 years ago

Hi,

I'm using the new method clear() : it delete correctly input content, but I also need the dropdown to be closed.

How can I do it?

Thanks


Bartosz Termena staff commented 5 years ago

Hi!

To be sure - which version of autocomplete are you using?

Best, Bartosz.


bitjuice pro commented 5 years ago

Hi Bartosz,

I'm using ng-uikit-pro-standard 8.3.1


Bartosz Termena staff answered 5 years ago

Dear @bitjuice

Could you provide your code? Below is my example, and everything seems to work fine (dropdown closes correctly):

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="md-form">
        <input
          type="text"
          class="completer-input form-control mdb-autocomplete"
          [ngModel]="searchText | async"
          (ngModelChange)="searchText.next($event)"
          [mdbAutoCompleter]="auto"
          placeholder="Choose your color"
        />
        <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
          <mdb-option *ngFor="let option of results | async" [value]="option">
            {{ option }}
          </mdb-option>
        </mdb-auto-completer>
      </div>
    </div>
  </div>
</div>
<hr />
<button (click)="onClick()" mdbBtn type="button">clear</button>

TS:

  @ViewChild(MdbAutoCompleterDirective, { static: true })
  mdbAutoCompleter: MdbAutoCompleterDirective;

  searchText = new Subject();
  results: Observable<string[]>;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

  ngOnInit() {
    this.results = this.searchText.pipe(
      startWith(''),
      map((value: string) => this.filter(value))
    );
  }

  filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
  }

  onClick() {
    this.mdbAutoCompleter.clear();
  }

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chorme
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No