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)