Jquery Autocomplete case sensitive for utf-8 characters

Question

I am using jquery autocomplete plugin to search in a long list of names. It works fine for all latin and english characters, but with turkish characters I have problems, as the search will be case sensitive eg:

A and a would match all the cities containing the A or a.

İ and i would not match cities like İstambul and İzmir

This is the code:

<label for="PROVINCE_AC_LEFT" class="
      PROVINCE_AC_LEFT">İl</label><input   type="text" name="PROVINCE_AC_LEFT_autocomplete_label"  id="PROVINCE_AC_LEFT_autocomplete_label" 
             value="" maxlength="" size=""/><input   type="hidden" name="PROVINCE_AC_LEFT"  id="PROVINCE_AC_LEFT" 
             value="" />
            <script>
             $(function() {

                            var tags_PROVINCE_AC_LEFT = [




               { label: "Van" , value: "6500" },

               { label: "Yozgat" , value: "6600" },

               { label: "Zonguldak" , value: "6700" },

               { label: "Aksaray" , value: "6800" },

               { label: "Bayburt" , value: "6900" },

               { label: "Karaman" , value: "7000" },

               { label: "Kırıkkale" , value: "7100" },

               { label: "Batman" , value: "7200" },

               { label: "Şırnak" , value: "7300" },

               { label: "Bartın" , value: "7400" },

               { label: "Ardahan" , value: "7500" },

               { label: "Iğdır" , value: "7600" },

               { label: "Yalova" , value: "7700" },

               { label: "Karabük" , value: "7800" },

               { label: "Kilis" , value: "7900" },

               { label: "Osmaniye" , value: "8000" },

               { label: "Düzce" , value: "8100" },

               { label: "Adana" , value: "0100" },

               { label: "Adıyaman" , value: "0200" },

               { label: "Afyonkarahisar" , value: "0300" },

               { label: "Ağrı" , value: "0400" },

               { label: "Amasya" , value: "0500" },

               { label: "Ankara" , value: "0600" },

               { label: "Antalya" , value: "0700" },

               { label: "Artvin" , value: "0800" },

               { label: "Aydın" , value: "0900" },

               { label: "Balıkesir" , value: "1000" },

               { label: "Bilecik" , value: "1100" },

               { label: "Bingöl" , value: "1200" },

               { label: "Bitlis" , value: "1300" },

               { label: "Bolu" , value: "1400" },

               { label: "Burdur" , value: "1500" },

               { label: "Bursa" , value: "1600" },

               { label: "Çanakkale" , value: "1700" },

               { label: "Çankırı" , value: "1800" },

               { label: "Çorum" , value: "1900" },

               { label: "Denizli" , value: "2000" },

               { label: "Diyarbakır" , value: "2100" },

               { label: "Edirne" , value: "2200" },

               { label: "Elazığ" , value: "2300" },

               { label: "Erzincan" , value: "2400" },

               { label: "Erzurum" , value: "2500" },

               { label: "Eskişehir" , value: "2600" },

               { label: "Gaziantep" , value: "2700" },

               { label: "Giresun" , value: "2800" },

               { label: "Gümüşhane" , value: "2900" },

               { label: "Hakkari" , value: "3000" },

               { label: "Hatay" , value: "3100" },

               { label: "Isparta" , value: "3200" },

               { label: "Mersin" , value: "3300" },

               { label: "İstanbul" , value: "3400" },

               { label: "İzmir" , value: "3500" },

               { label: "Kars" , value: "3600" },

               { label: "Kastamonu" , value: "3700" },

               { label: "Kayseri" , value: "3800" },

               { label: "Kırklareli" , value: "3900" },

               { label: "Kırşehir" , value: "4000" },

               { label: "Kocaeli" , value: "4100" },

               { label: "Konya" , value: "4200" },

               { label: "Kütahya" , value: "4300" },

               { label: "Malatya" , value: "4400" },

               { label: "Manisa" , value: "4500" },

               { label: "Kahramanmaraş" , value: "4600" },

               { label: "Mardin" , value: "4700" },

               { label: "Muğla" , value: "4800" },

               { label: "Muş" , value: "4900" },

               { label: "Nevşehir" , value: "5000" },

               { label: "Niğde" , value: "5100" },

               { label: "Ordu" , value: "5200" },

               { label: "Rize" , value: "5300" },

               { label: "Sakarya" , value: "5400" },

               { label: "Samsun" , value: "5500" },

               { label: "Siirt" , value: "5600" },

               { label: "Sinop" , value: "5700" },

               { label: "Sivas" , value: "5800" },

               { label: "Tekirdağ" , value: "5900" },

               { label: "Tokat" , value: "6000" },

               { label: "Trabzon" , value: "6100" },

               { label: "Tunceli" , value: "6200" },

               { label: "Şanlıurfa" , value: "6300" },

               { label: "Uşak" , value: "6400" },



                            ];

                            $( "#PROVINCE_AC_LEFT_autocomplete_label" ).autocomplete({
                                source: tags_PROVINCE_AC_LEFT,
                                select: function(event, ui) {
                                    var selectedObj = ui.item;
                                    $( "#PROVINCE_AC_LEFT_autocomplete_label" ).val(selectedObj.label);
                                    $( "#PROVINCE_AC_LEFT" ).val(selectedObj.value);
                                    return false;
                                },
                                focus: function( event, ui ) { $(this).val( ui.item.label ); return false; }
                            });
                        });

             </script>

An example can be found at the second page of the registration questionnaire :

http://tr.mysurvey.com/index.cfm?action=Main.join

Answer 1

After years from the last reply, I just ran into the same problem.

Accent mapping is not good enough for Turkish because it is still matching "I" with "i" and vice versa. However, lowercase "I" is "ı" and uppercase "i" is "İ" in Turkish. So, when I type "I", "İzmir" should NOT be a match and when I type "İ", "Iğdır" should NOT be a match.

So I used the following:

function toLowerTurkish(str) {
  var letters = {
    'Ç': 'ç', 'Ğ': 'ğ', 'I': 'ı', 'İ': 'i', 'Ö': 'ö', 'Ş': 'ş', 'Ü': 'ü',
  };
  str = str.replace(/(([ÇĞIİÖŞÜ]))/g, function(letter) { return letters[letter]; });
  return str.toLowerCase();
}

function containsTurkish(txt, str) {
  return toLowerTurkish(txt).indexOf(toLowerTurkish(str)) >= 0;
}

var itemList = [
  { label: 'İzmir',    value: 'İzmir' },
  { label: 'istanbul', value: 'istanbul' },
  { label: 'Iğdır', value: 'Iğdır' },
  { label: 'ısparta', value: 'ısparta' }
];

function autocompleteSourceTurkish(request, response) {
  var matchList = [];
  itemList.forEach(function(item, index) {
    if (containsTurkish(item.label, request.term)) matchList.push(item);
  });
  response(matchList);
}

$(function() {
  $('#itemMenu').autocomplete({
    source: autocompleteSourceTurkish
  });
});

http://jsfiddle.net/emfy5gf9/