Search Turkish Character Problem on VueJs Bootstrap Vue Table

Question

I have a problem. I used bootstrap vue table. And I have a search box. I have a yield as "Istanbul". It doesn't see it when I press i in lower case. It accepts a capital letter I. I tried toLocaleLowerCase() but didn't run.

I type "istanbul" in the search box, but it does not find it in the table. It finds it when you write it as "İstanbul".

This is my template and dataset:

<template>
  <div>
    <b-table striped hover :fields="fields" :items="cities"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cities : [
         {key:1,city:'İstanbul'},
         {key:2,city:'İzmir'},
         {key:3,city:'Adana'},
         ],
        cityCopyArray : [
        {key:1,city:'İstanbul'},
        {key:2,city:'İzmir'},
        {key:3,city:'Adana'},
        ],
        fields:["city"]
    }
  }
</script>

This is my input:

<input
:placeholder="'City Name"
:id="'cityNamr'"
v-model="citySearchSearch"></input>

This is my watch:

    citySearchSearch: {
      handler(val) {
        this.cities = this.cityCopyArray.filter((city) => {
          return this.converter(city.name).includes(this.converter(val))
        })t
      },
    },

And I used this code as converter :

    converter(text){
      var trMap = {
        'çÇ':'c',
        'ğĞ':'g',
        'şŞ':'s',
        'üÜ':'u',
        'ıİ':'i',
        'öÖ':'o',
      };
      for(var key in trMap) {
        text = text.replace(new RegExp('['+key+']','g'), trMap[key]);
      }
      return  text.replace(/[^-a-zA-Z0-9\s]+/ig, '')
          .replace(/\s/gi, "-")
          .replace(/[-]+/gi, "-")
          .toLowerCase();
    },

Answer 1

You can compare Turkish characters using toLocaleUpperCase('tr-TR') like:

const firstWord = 'istanbul';
const secondWord = 'İstanbul';
// If firstWord contains secondWord, firstWordContainsSecondWord will be true otherwise false.
const firstWordContainsSecondWord = firstWord.toLocaleUpperCase('tr-TR').indexOf(secondWord.toLocaleUpperCase('tr-TR')) !== -1; 

Simple example:

new Vue({
  el: '#app',
  data: {
    firstWord: 'istanbul',
    secondWord: 'İstanbul',
    result: null,
  },
  watch: {
    firstWord() {
      this.contains();
    },
    secondWord() {
      this.contains();
    }
  },
  mounted() {
    this.contains();
  },
  methods: {
    contains() {
      // If firstWord contains secondWord, result will be true otherwise false.
      this.result = this.firstWord.toLocaleUpperCase('tr-TR').indexOf(this.secondWord.toLocaleUpperCase('tr-TR')) !== -1;
    }
  }
});

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input placeholder="firstWord" v-model="firstWord">
  <input placeholder="secondWord" v-model="secondWord">
  <br/><br/>
  <div>
    Result =>
    <br/> {{ firstWord }} contains {{ secondWord }} : {{ result }}
  </div>
</div>