Prevent text no results from showing on Input click


Topic: Prevent text no results from showing on Input click

anuragd7 asked 5 years ago

Expected behavior I have implemented the mdb-autocomplete and am facing one problem. After page load the first time the user clicks on the input bar the "textNoResults" message is displayed immediately even before the user has entered anything in the search bar. Is there a way to prevent this from happening.

My code is as follows:

 <div id="homeSearch" class="input-group ml-auto">
              <input
                type="text"
                class="completer-input form-control mdb-autocomplete mb-0"
                aria-label="Find tests"
                placeholder="Search by lesson or topic"
                [ngModel]="searchTopic | async"
                (ngModelChange)="searchTopic.next($event)"
                [mdbAutoCompleter]="auto"
                placement="top"
              />
              <div class="input-group-append">
                <div class="btn-group">
                  <button
                    type="button"
                    mdbBtn
                    color="default"
                    size="md"
                    class="z-depth-0"
                    mdbWavesEffect
                    (click)="getList()"
                  >
                    <mdb-icon fas icon="search"></mdb-icon>
                    Get List
                  </button>
                </div>
              </div>
              <mdb-auto-completer
                class="black-text"
                #auto="mdbAutoCompleter"
                textNoResults="Could not find matching results"
                [disabled]="enableSearch"
              >
                <mdb-option
                  *ngFor="let option of results | async"
                  [value]="option"
                >
                  {{ option }}
                </mdb-option>
              </mdb-auto-completer>
            </div>

TS Code

ngOnInit() {
    const self = this;
    this.results = this.searchTopic
      .pipe(debounceTime(1000), distinctUntilChanged())
      .pipe(
        map((value: string) => this.searchEntries(value))
      );
  }

searchEntries(term: string) {
    const filterValue = term.toLowerCase();
      let filteredResults = [];
      this.allResults.filter((data: any) => {
        if(data.toLowerCase().includes(filterValue))
        filteredResults.push(data);
      });
      return filteredResults;
    }
  }

Arkadiusz Idzikowski staff answered 5 years ago

Please add startWith('') to the second pipe in ngOnInit, that should resolve your problem:

  ngOnInit() {
    this.results = this.searchTopic
      .pipe(debounceTime(1000), distinctUntilChanged())
      .pipe(
        startWith(''),
        map((value: string) => this.searchEntries(value))
      );
  }

anuragd7 commented 5 years ago

Thanks for the suggestion. Just tried it - however the no results message still shows up as soon as we focus on the input element.


Arkadiusz Idzikowski staff commented 5 years ago

Please provide full html and ts code so we can check if there are any other problems in this example.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: mac
  • Browser: chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No