I try to use jQueryUI autocomplete with a list of turkish regions but I have some troubles. I've already searched on stack for an answer and the only solutions that I've found are "don't forget the lang attribute" and "don't forget utf-8" but despite this it still does not work.
Here is my snippet :
<!doctype html>
<html lang="tr">
<head>
<title>test tr</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="regions">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
var regions = ["Adana", "Adıyaman", "Afyonkarahisar", "Ağrı", "Aksaray", "Amasya", "Ankara", "Antalya", "Ardahan", "Artvin", "Aydın", "Balıkesir", "Bartın", "Batman", "Bayburt", "Bilecik", "Bingöl", "Bitlis", "Bolu", "Burdur", "Bursa", "Çanakkale", "Çankırı", "Çorum", "Denizli", "Diyarbakır", "Düzce", "Edirne", "Elazığ", "Erzincan", "Erzurum", "Eskişehir", "Gaziantep", "Giresun", "Gümüşhane", "Hakkari", "Hatay", "Iğdır", "Isparta", "İstanbul", "İzmir", "Kahramanmaraş", "Karabük", "Karaman", "Kars", "Kastamonu", "Kayseri", "Kilis", "Kırıkkale", "Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya", "Malatya", "Manisa", "Mardin", "Mersin", "Muğla", "Muş", "Nevşehir", "Niğde", "Ordu", "Osmaniye", "Rize", "Sakarya", "Samsun", "Şanlıurfa", "Siirt", "Sinop", "Şırnak", "Sivas", "Tekirdağ", "Tokat", "Trabzon", "Tunceli", "Uşak", "Van", "Yalova", "Yozgat", "Zonguldak"];
$('#regions').autocomplete({
source : regions
});
</script>
</body>
</html>
If I type "sta" I find İstanbul but I don't find it if I type "ist". The lower case dotted "i" should be the same character as the upper case "İ", right? It's not a case sensitive problem since I find Ankara when I type "ank".
Any help would be appreciated, thanks in advance.