Jquery Autocomplete对utf-8字符区分大小写

时间:2012-06-28 02:41:24

标签: jquery utf-8 jquery-ui-autocomplete turkish

我正在使用jquery autocomplete插件来搜索一长串名称。它适用于所有拉丁语和英语字符,但由于搜索将区分大小写,例如:

土耳其字符我有问题。

Aa会匹配包含Aa的所有城市。

İ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

2 个答案:

答案 0 :(得分:2)

从上次回复开始的几年后,我遇到了同样的问题。

口音映射对于土耳其语来说还不够好,因为它仍然将“I”与“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/

答案 1 :(得分:0)

我建议您查看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/

(我在演示中只添加了几个字符映射)