從串列創建搜索忽略特殊字符

我正在使用 PHP 后端開發 Vue-Vuetify 應用程式。我正在收到包含名字、姓氏和一些現在對我不重要的更多詳細資訊的聯系人串列。如何搜索該串列而忽略所有特殊字符？讓我解釋一下我需要什么。
示例名稱：
Janko Hra?ko（在我的語言中，我們的名稱包含特殊字符，如 ?????yáí...）。
目前，當我嘗試在該串列中查找某些內容時，我可以按名字和姓氏進行搜索，例如，當我寫下 Janko 時，我會得到這個人，當我寫下 Hra?ko 時，我會得到同一個人。
第一個問題是，我可以以某種方式將它合并在一起嗎？像這樣：
我會寫Jan（人會出現，但也許有更多的人有相同的名字和不同的姓氏，所以它會顯示所有以Jan開頭的名字......）。
然后我放了空格并寫了 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;
  }
}

}

謝謝大家的幫助！

uj5u.com熱心網友回復：

我的理解是，您想按名字和姓氏搜索用戶，我按以下方式進行了操作：

您可以創建一種演算法來在具有規范化文本的陣列中查找多個規范化單詞。

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>

標籤：javascript Vue.js 搜索 Vuetify.js

上一篇：組件上的輸入事件在Vue.js中有什么作用？

下一篇：vue通過js更改選定的選項，使用v-model