Jquery Autocomplete case sensitive for utf-8 characters
https://stackoverflow.com/questions/11237394
-
17-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
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 :
解決
I would recommend taking a look at the accent map demo on the jQueryUI examples page. The idea in the demo is to map accent characters to non-accented characters using a hash. I would change your code to look like that 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;
}
});
Example: http://jsfiddle.net/gZ8xz/
(I've only added a few character mappings in the demo)
他のヒント
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
});
});
所属していません StackOverflow
