<div class="container">
  <table>
    <thead>
      <div class="searchfield">
        <input
          type="text"
          [(ngModel)]="firstName"
          (input)="Search()"
          placeholder="Search"
        />
      </div>
    </thead>

    <tbody>
      <tr>
        <th (click)="sortItems(entry.id)" scope="row">ID</th>
        <td (click)="sortItems(entry.firstName)" colspan="2">
          <label for="taskbar">Name</label>
        </td>
        <td (click)="sortItems(entry.secondName)" colspan="2">
          <label for="taskbar">Vorname</label>
        </td>
        <td (click)="sortItems(entry.firstMobileNumber)" colspan="2">
          <label for="mobileNumber">Mobilfunknummer 1 </label>
        </td>
        <td (click)="sortItems(entry.secondMobileNumber)" colspan="2">
          <label for="secondMobileNumber">Mobilfunknummer 2 </label>
        </td>
        <td (click)="sortItems(entry.firstEmail)" colspan="2">
          <label for="email">E-Mail 1 </label>
        </td>
        <td (click)="sortItems(entry.secondEmail)" colspan="2">
          <label for="email">E-Mail 2 </label>
        </td>
        <td (click)="sortItems(entry.roomNumber)" colspan="2">
          <label for="roomNumber">Raumnummer </label>
        </td>
        <td (click)="sortItems(entry.task)" colspan="2">
          <label for="task">Aufgabe </label>
        </td>
      </tr>

      <tr *ngFor="let entry of listOfContacts">
        <!-- Nur die Kopie wird angezeigt! -->

        <th scope="row">{{entry.id}}</th>

        <td colspan="2">{{entry.firstName}}</td>
        <td colspan="2">{{entry.secondName}}</td>
        <td colspan="2">{{entry.firstMobileNumber}}</td>
        <td colspan="2">{{entry.secondMobileNumber}}</td>
        <td colspan="2">{{entry.firstEmail}}</td>
        <td colspan="2">{{entry.secondEmail}}</td>
        <td colspan="2">{{entry.roomNumber}}</td>
        <td colspan="2">{{entry.task}}</td>
        <td>
          <button
            class="buttonDelete"
            (click)="openDialogDelete(entry.id)"
            color="warn"
          >
            Delete
          </button>
        </td>
        <td>
          <button (click)="openDialogEdit(entry.id)" class="btn btn-secondary">
            Edit
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="buttonAdd" (click)="openDialogAdd()">Add</button>
</div>

export class TableListComponent implements OnInit {
  entry: ContactListEntry = {
    id: null,
    firstName: '',
    secondName: '',
    firstMobileNumber: '',
    secondMobileNumber: '',
    firstEmail: '',
    secondEmail: '',
    roomNumber: '',
    task: '',
    notes: '',
  };

  listOfContacts = [];
  firstName: string;

  constructor(private dataServiceService: DataServiceService, private dialog: MatDialog) {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  ngOnInit(): void {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  Search() {
    if (this.firstName != '') {
      this.listOfContacts = this.listOfContacts.filter((res) => {
        return res.firstName.toLocaleLowerCase().match(this.firstName.toLocaleLowerCase());
      });
    } else if (this.firstName == '') {
      this.ngOnInit();
    }
  }
}

I want that when I enter things in the search field that mobileNumber is also searched for or the other items in the objects of the array are searched for, so not just firstName but all other items as well.

Unfortunately, at the moment it only works with firstName, so the other items from entry are not searched for

CodePudding user response：

While writing code name of the variable should be defined what they are meant for: if you want it to search everything it should be called searchText:

<input type="text" [(ngModel)]="searchText" (input)="Search()" placeholder="Search" /> 

Search is only searching on name since you have not compared it with anything else.

    Search(){
    
      if(this.searchText!== ""){
    let searchValue = this.searchText.toLocaleLowerCase();

        this.listOfContacts = this.listOfContacts.filter(contact =>{
          return contact.firstName.toLocaleLowerCase().match(searchValue ) ||
    contact.secondName.toLocaleLowerCase().match(searchValue) ||
    contact.email.toLocaleLowerCase().match(searchValue);
 // you can keep on adding object properties here   
    
        });
    
      }else {  // if(this.searchText== ""){ you don't need this if
        this.ngOnInit();
      } 
}
  

CodePudding user response：

you can try this, in this solution we are traversing over every item in the object of the list and looking for type of the item like string or number and equate on behalf of that and if any of the condition matches the search value it will return the filtered data

this.filteredItems = this.listToFilter.filter(item => {
                for (let key in item) {
                    try {
                        if (typeof item[key] == 'string') {
                            let result = ((item[key]) ? item[key].toLowerCase().indexOf(value.toLocaleLowerCase()) !== -1 : false);
                            if (result == true) return true;
                        } else if (typeof item[key] == 'number') {
                let result = ((item[key]) ? item[key] === value : false)
            }
                    } catch (e) {
                    }
                }
                return false;
            });