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

Question

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

第二个问题，如何忽略特殊字符？目前，当我写 Hrasko 时什么也不会出现，但是当我写 Hraško 时，会列出一个人。是否可以忽略所有特殊字符并在没有的情况下进行搜索？像赫拉斯科、科瓦奇等...

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

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

您可以创建一种算法，在包含标准化文本的数组中查找多个标准化单词。

在您的数据中定义要搜索的数据并定义对象数组
您规范化您输入的搜索字段并将其转换为正则表达式
最后过滤用户数组，将数组中的数据转换为规范化字符串，然后与正则表达式匹配

这是我找到的解决问题的方法，如果谁有更高效的代码，欢迎解答。我会把下面的例子留给你，如果它不起作用我会把代码依赖留给你 [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>

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

Create search from list ignoring special characters

javascript

search

vue.js

vuetify.js