JavaScript

searchSubCategories() {

  const query = this.subCategoriesForm.controls["searchQuery"].value;
  if (query) {
    const results = this.model.SubCategories
      .find(q => q.Name.toLowerCase().includes(query.toLowerCase(), 0)
        || q.Description.toLowerCase().includes(query.toLowerCase(), 0));
    if (results) {
      const index = this.model.SubCategories.indexOf(results);
      this.model.SubCategories.splice(index, 1);
      this.model.SubCategories.unshift(results);
    }
  }
}

searchSubCategories() {
   if(this.subCategoriesForm.controls["searchQuery"].value){ 
      let query = this.subCategoriesForm.controls["searchQuery"].value.toLowerCase();

      this.model.searchResults = 
         this.model.SubCategories.map(sub => {
            if(sub.Name.toLowerCase().includes(query)){
               return {
                  subCategory: sub,
                  foundIn: 'name'
               }
            }

            if(sub.Description.toLowerCase().includes(query)){
               return {
                  subCategory: sub,
                  foundIn: 'description'
               };
            }
      });   

      this.model.searchResults.sort((a,b) => {
         // sort relevance based on if term is found in name or if in description
         if(a.foundIn !== b.foundIn){
            if(a.foundIn === 'name'){
               return -1
            }
            if(b.foundIn === 'name')
            {
               return 1;
            }
         }
         return 0;
      });
   }
}

Nathan Minier wrote:

Okay, the reason that you're getting one result is that everything that you're doing is intended to operate on only one element. Array.find(), for instance, is basically the JS version of .FirstOrDefault(). Array.indexOf() is a single element as well.

export interface SubCategorySearchResults {
  subCategory: SubCategories;
  foundIn: string;
}
export class SubCategories {
  Id: string;
  Name: string;
  Description: string;
  CreatedBy: string;
  CreatedOn: Date;
  UpdatedOn: Date;
  Selected: boolean;
}

// And produced this JSON

[{"subCategory":{"Id":"5d7fd71ef9a41e064ce3cbd9","Name":"Super Thick","Description":"Non moving gel","CreatedBy":"admin","CreatedOn":"2019-09-16T18:40:30.887Z","UpdatedOn":"2019-09-16T18:40:30.859Z","Selected":false},"foundIn":"Name"},{"subCategory":{"Id":"5d7fd63bf9a41e064ce3cbd8","Name":"Thick","Description":"Very Slow Moving Gels","CreatedBy":"admin","CreatedOn":"2019-09-16T18:36:43.762Z","UpdatedOn":"2019-09-16T18:36:43.718Z","Selected":false},"foundIn":"Name"},{"subCategory":{"Id":"5d7fd418f9a41e064ce3cbd6","Name":"Thin ","Description":"Fast moving","CreatedBy":"admin","CreatedOn":"2019-09-16T18:27:36.675Z","UpdatedOn":"2019-09-16T18:27:36.645Z","Selected":false},"foundIn":"Name"}]{

searchSubCategories2(): void {

  const query = this.subCategoriesForm.controls["searchQuery"].value.toLowerCase();
  if (query) {
    const results = this.model.SubCategories.map(sub => {
      if (sub.Name.toLowerCase().includes(query)) {
        return { subCategory: sub, foundIn: "Name" };
      }
      if (sub.Description.toLowerCase().includes(query)) {
        return { subCategory: sub, foundIn: "Description" };
      }
    });

    if (results) {
      results.sort((a, b) => {
        if (a.foundIn !== b.foundIn) {
          if (a.foundIn === "Name") { return -1; }
          if (b.foundIn === "Name") { return 1; }
        }
        return 0;
      });

      this.model.SubCategories = [];
      results.forEach(result => {
        this.model.SubCategories.push(result.subCategory);
      });

      console.log(JSON.stringify(results));
      console.log(JSON.stringify(this.model.SubCategories));
    }
  }
}