0

I got the autocomplete format from: http://www.freakyjolly.com/angular-7-6-material-autocomplete-example-with-remote-server-side-results/

My input field is not erasing the placeholder when typing something in, as well as the options are not displaying. Looks like the javascript is correct and pulls everything from the database correctly, but I cant figure out why neither of them are working. I do have:

    import { MatAutocompleteModule } from '@angular/material/autocomplete';
    import { MatInputModule } from '@angular/material/input';
    import { MatSelectModule, MatFormFieldModule } from '@angular/material';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

I read somewhere, that I'm not supposed to have if statements inside , but it doesn't work even when i take them out

in my module.ts

Here is my code:

html code html code

    <div>
      <br>
      <form (click)="check(submitTag)" #submitTag="ngForm">
        <mat-form-field>
          <input matInput placeholder="skills" [matAutocomplete]="auto" [formControl]="searchTagsCtrl" type="text">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
[displayWith]="displayFn.bind(this)">
            <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
            <ng-container *ngIf="!isLoading">
              <mat-option *ngFor="let tag of filtered_tags" [value]="tag">
                <span>({{tag.tag_name}})</span>
              </mat-option>
            </ng-container>
          </mat-autocomplete>
        </mat-form-field>
      </form>
      <br>
    </div>

component.js

    import { Component, OnInit } from '@angular/core';
    import { FormControl, NgForm } from '@angular/forms';
    import { HttpClient } from '@angular/common/http';

    import { debounceTime, tap, switchMap, finalize } from 'rxjs/operators';
    import { TagService } from 'src/app/_services/tag.service';


    @Component({
      selector: 'app-tag',
      templateUrl: './tag.component.html',
      styleUrls: ['./tag.component.css']
    })
    export class TagComponent implements OnInit {
      searchTagsCtrl = new FormControl();
      filtered_tags: any;
      isLoading = false;
      errorMsg: string;

      constructor(private http: HttpClient, private tagService: TagService) { }

      ngOnInit() {

        this.searchTagsCtrl.valueChanges
          .pipe(
            debounceTime(500),
            tap(() => {
              this.errorMsg = "";
              this.filtered_tags = [];
              this.isLoading = true;
            }),
            switchMap(value => {
              if(value.hasOwnProperty('tag_name')){
                return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value.tag_name } )
                .pipe(
                  finalize(() => {
                    this.isLoading = false
                  }),
                )
              }else{
                return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value } )
                .pipe(
                  finalize(() => {
                    this.isLoading = false
                  }),
                )
              }
            })
          )
          .subscribe(data => {
            if (data['tags'].length == 0 ) {
              this.errorMsg = data['message'];
              this.filtered_tags = [];
            } else {
              this.errorMsg = "happy";
              this.filtered_tags = data['tags'];
            }
           });
        }

      displayFn(tag) {
        if (!tag) return '';
        if(tag.hasOwnProperty('tag_id')){
          console.log(tag)
        }else{
          console.log(tag)
        }
      }

      check(form: NgForm){
        console.log('check')
        form.reset()
      }
    }

you can see I typed in A and it over-rode the S in Skills but didn't disappear entirely, additionally, you see the options menu didn't appear. The backend does pull the info correctly. Here is an image of the input not working

Placeholder mess up

aynber
  • 22,380
  • 8
  • 50
  • 63
tonsar
  • 71
  • 8

0 Answers0