从忽略特殊字符的列表创建搜索

Question

我正在开发带有 PHP 后端的 Vue-Vuetify 应用程序。 我正在接收包含名字、姓氏和一些现在对我不重要的更多详细信息的联系人列表。 如何在忽略所有特殊字符的情况下搜索该列表？ 让我解释一下我需要什么。
示例名称：
Janko Hraško（在我的语言中，我们的名称包含特殊字符，例如 ľščťžýáí...）。
目前，当我尝试在该列表中查找某些内容时，我可以按名字和姓氏进行搜索，例如，当我写 Janko 时，我会找到这个人，当我写 Hraško 时，我会找到同一个人。
第一个问题是，我可以以某种方式将它们合并在一起吗？像这样：
我会写 Jan（人会出现，但可能有更多同名和不同姓氏的人，所以它会显示从 Jan 开始的所有名字......）。
然后我放空格并写 Hra（现在只显示 1 个人）。 所以我的意思是搜索结合名字和姓氏而不输入全名。

第二个问题，我怎样才能忽略特殊字符？目前，当我写 Hrasko 时，什么都不会出现，但是当我写 Hraško 时，会列出一个人。 是否可以忽略所有特殊字符并不进行搜索？像 Hrasko、Kovac 等......

我的代码在这里：(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;
  }
}

}

谢谢大家的帮助！

Answer 1

我的理解是你想按名字和姓氏搜索用户，我的工作方式如下：

您可以创建一个算法来查找具有规范化文本的数组中的多个规范化单词。

1. 在您的数据中定义您将搜索的数据并定义您的对象数组

2. 您将输入的字段标准化以进行搜索并将其转换为正则表达式

3. 最后，您过滤您的用户数组，将数组中的数据转换为规范化字符串，然后匹配您的正则表达式

这是我找到的解决问题的方法，如果有人有更高效的代码，欢迎回答。我将把下面的例子留给你，如果它不起作用，我会给你留下 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 class="ma">
          <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 class="ma">
          <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 class="ma">
          <v-card-text>
            Search Field
          </v-card-text>
          <v-card-text>
            {{searchUsers}}
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

</div>