Jquery的自动填充情况下UTF-8字符敏感(Jquery Autocomplete case s

我使用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的例子页面上。 在演示的想法是映射使用哈希重音字符与非重音字符。 我会改变你的代码看起来像演示：

$("#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”，“厄德尔省”不应匹配。

所以我用了以下内容：

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/

文章来源: Jquery Autocomplete case sensitive for utf-8 characters