Check the search string uppercase and lowercase both-CodePudding

When the user will give input to the search box I want it to check if this string is available or not and display it. Currently, it is only showing results matched with uppercase to uppercase and lowercase to lowercase. But I want to match with the string uppercase and lowercase both at a time. Example: Let's say we are searching for TopLeader. when a user writes top it doesn't show the result but when the user type Top the TopLeader result shows. I want when the user will search top or TOP still result will show.

Here is my code Template:

<tbody>
  <tr v-for="item in filteredData" :key="item.id">
    <FLM :flm="item.flm" :flmCode="item.flm_code" />
  </tr>
</tbody>

Script:

data() {
return {
  worksheet: [],
  search: "",
};
},
computed: {
filteredData: function () {
  return this.worksheet.filter((result) => {
    console.log(result);
    return result.NSM.match(this.search);
  });
},
},
mounted() {
fetch("http://localhost:3000/worksheet")
  .then((response) => response.json())
  .then((data) => (this.worksheet = data))
  .catch((err) => console.log(err.msg));
  },

CodePudding user response：

I'm not sure I got your expectation well but if I did I'd say you could convert your search string into a RegExp, and pass it a case insensitive parameter

  return this.worksheet.filter((result) => {
    return result.NSM.match(new RegExp(this.search, 'i'));
  });

CodePudding user response：

The "i" regexp flag does the job. Example:

[
  "top",
  "Top",
  "TOP",
  "topo"
]
.map((input) => {
  console.log(`${input} => ${RegExp(input, "i").test("TopModel")}`)
 })