Jquery自動完成對UTF-8字符的大小寫敏感

Question

我正在使用jQuery自動完成插件來搜索一長串名稱。它工作正常的所有英語和拉丁語字符，但土耳其字符我有問題，因爲搜索將是區分大小寫例如：

A和a將匹配包含A或a的所有城市。

İ和i將不匹配的城市，如İstambul和İzmir

這是代碼：

<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> 

一個例子可以在登記調查表的第二頁中找到：

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

Answer 1

我會建議服用請查看jQueryUI示例頁面上的accent map demo。演示中的想法是使用散列將重音字符映射到非重音字符。我會改變你的代碼看起來像演示：

$("#PROVINCE_AC_LEFT_autocomplete_label").autocomplete({ 
    source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(tags_PROVINCE_AC_LEFT, function(value) { 
      value = value.label || value.value || value; 
      return matcher.test(value) || matcher.test(normalize(value)); 
     })); 
    }, 
    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; 
    } 
}); 

例子：http://jsfiddle.net/gZ8xz/

（我只加在演示中的幾個字符映射）

Answer 2

經過多年的從上回復，我剛碰到同樣的問題。

口音映射對於土耳其語來說還不夠好，因爲它仍然與「我」匹配「I」，反之亦然。但是，小寫字母「I」是「ı」，大寫字母「i」是土耳其語中的「İ」。所以，當我輸入「I」時，「İzmir」不應該是匹配，當我輸入「İ」時，「Iğdır」不應該是匹配。

所以我用下面的：

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/