Create search from list ignoring special characters-CodePudding

I am working on Vue-Vuetify app with PHP backend. I am receiving list of contacts that contain first name, last name and some more details not important for me now. How can I search trought that list ignoring all special characters? Let me explain what I need.
Example name:
Janko Hraško (in my language we have names containing special characters like ľščťžýáí...).
Currently when I try to find something in that list, I can search by first name and last name, for example when I write Janko I will get this person, when I write Hraško I will get same person.
First question is, can I somehow merge it together? Like this:
I will write Jan (person will appear, but maybe there are more person with same name and different last name, so It will show me all names starting Jan...).
Then I put space and write Hra (and now only that 1 person will be shown). So what I mean is to search combining first name and last name without entering whole name.

Second question, how can I ignore special characters? Currently, when I write Hrasko nothing will appear but when I write Hraško, that one person will be listed. Is it possible to ignore all special characters and search without? Like Hrasko, Kovac etc...

My code is here: (Vue.app)

computed: {
filteredContacts (){
  if(this.search){
  return this.contact_list.filter((item)=>{
    return item.firstname.toLowerCase().startsWith(this.search) || item.lastname.toLowerCase().startsWith(this.search) ||
        item.firstname.startsWith(this.search) || item.lastname.startsWith(this.search);
  })
  }else{
    return this.resources;
  }
}

}

Thank you all for help!

CodePudding user response：

What I understand is that you want to search for users by first and last name, I have worked it in the following way:

You can create an algorithm to find multiple normalized words in an array with normalized texts.

In your data you define the data you will search and define your array of objects
you normalize the field you typed to search and turn it into a regex
Finally you filter your array of users converting the data from the array into a normalized string then you match with your regex

This is the way I found to solve the problem, if anyone has more efficient code, the answer is welcome. I'll leave you the example below, if it doesn't work I'll leave you the codepend [https://codepen.io/jorgehn1995/pen/BawJbwX][1]

new Vue({
  el: "#app",
  data() {
    return {
    /**
    *1 DEFINES THE DATA 
    **/
      search: "",
      users: [
        {name:"Janko", lastName:"Hraško"},
        {name:"Janko", lastName:"Hrašdo"},
        {name:"Jando", lastName:"Hro"},
        { name: "John", lastName: "Dúe" },
        { name: "Jessie", lastName: "Dös" }
      ]
    };
  },
  computed: {
    searchUsers() {
      if(this.search=="") return this.users;
      /**
       *2 THIS CODE GENERATE THE REGEX
       **/
      let searchData = this.search
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .toLowerCase()
        .replace(/ /g, ")(?=.*");
      searchData = "(?=.*"   searchData   ").*";
      let regexToSearch = new RegExp(searchData, "gi");

      /**
       *3 THIS CODE GENERATES A ARRAY OF STRINGS
       *WHERE THE PREVIOUS CODE WILL BE SEARCHED
       **/

      return this.users.filter((e) => {
        return (e.name   " "   e.lastName)
          .toString()
          .normalize("NFD")
          .replace(/[\u0300-\u036f]/g, "")
          .toLowerCase()
          .match(regexToSearch);
      });
    }
  }
});

.ma{
 margin:25px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">

<div id="app">
  <v-container style="magin-bottom:50px;">
    <v-row dense>
      <v-col cols="12" sm="4">
        <v-card >
          <v-card-text>
            Source Data
          </v-card-text>
          <v-card-text>
            {{users}}
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" sm="4">
        <v-card >
          <v-card-text>
            Search Field
          </v-card-text>
          <v-card-text>
            <v-text-field label="Search" v-model="search" filled></v-text-field>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" sm="4">
        <v-card >
          <v-card-text>
            Search Field
          </v-card-text>
          <v-card-text>
            {{searchUsers}}
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

</div>