Jquery ui - Autocomplete - UTF8 charset

Question

im working on this jquery data entry form in which i need a specific field to be autocompleted with data from mysql

i got everything working, autocomplete retrieves data from the sql through php matching is great in english/latin characters

problem is, when i type greek, i only get case SENSITIVE matches if i type in the right case, i get my match and everything goes well, but id' like it to be case INsensitive

as you understand i am using it with an external source, so im guessing it must be something when comparing the two strings... works perfectly when typing case correctly...

also, as you will see in my code i have an array [id,name] with my current configuration, (even case sensitive) i search the name, the dropdown appears, when i click the name i want, the cell gets filled with the ID and when i submit the form, the id gets posted to the next php page.

is there any way to have exactly the same thing but instead of filling the field with the id to fill it with the name? ie: search for name, get dropdown with names, click and get the name in the field, and when i submit i get the id posted?

any help would be greatly appreciated. here's the code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/dropdowndata/dropdowndata.name.js"></script>

blah blah...

<li class="ui-widget"><label for="name"> Last name: </label><input class="name" name="name" style="width:100px" /></li>

here's the js:

$(function() {
    var cache = {},
        lastXhr;
    $( ".name" ).autocomplete({
        minLength: 1,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });
});

and here's the source (search.php):

<?php

                $link = mysql_connect("1","2","3");
                        if (!$link) {  die("Database Connection Failed". mysql_error());}

    mysql_set_charset('utf8',$link);

                $db_select = mysql_select_db("form2",$link);
                        if(!$db_select){die("Database Selection Failed " . mysql_error());}

    mysql_query("SET NAMES 'utf8'", $link);

                $result1 = mysql_query("SELECT dlastname,dfirstname,id FROM doctors ORDER BY dlastname ASC", $link);
                        if(!$db_select){die("No Data found in db " . mysql_error());            }

$items=array();

                while($row = mysql_fetch_array($result1)){
                         $items[$row['id']] = $row['dlastname']. ", ". $row['dfirstname'];}

sleep( 1 );
if (empty($_GET['term'])) exit ;
$q = strtolower($_GET["term"]);
if (get_magic_quotes_gpc()) $q = stripslashes($q);



$result = array();
foreach ($items as $value=>$key) {
        if (strpos(strtolower($key),$q ) !== false) {
                array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($value)));
        }
        if (count($result) > 11)
                break;}

echo json_encode($result);


?>

you can see i have included mysql_set_charset('utf8',$link); mysql_query("SET NAMES 'utf8'", $link); in my source php file + the charset in my webpage... even tried setting a tag in the source php file but it messed everything :(

as you understand i am very new to all these, so if any1 could take some time and explain me what im missing, it would be great :) also any other suggestions/improvements would be great as this is one of my first pieces of code :)

thanx in advance

Answer 1

you need to add a header to begin of php page (index or any you call from ajax (search.php))

 header("Content-Type:text/html; charset=utf-8");

Answer 2

In the documentation on the autocomplete plugin, there is an option called matchCase. By default, it is set to false. Change that to true, and the matches should then be case insensitive.

http://docs.jquery.com/Plugins/Autocomplete/autocomplete

Answer 3

I figured it out, there seems to be a problem with the strtolower() and UTF-8 charset I switched both occurances of strtolower($string) in search.php to: mb_strtolower(($string),'UTF-8') and it worked ;)

the code looks like this now:

sleep( 1 );
if (empty($_GET['term'])) exit ;
//change in next line:
$q = mb_strtolower(($_GET["term"]),'UTF-8');
if (get_magic_quotes_gpc()) $q = stripslashes($q);



$result = array();
foreach ($items as $value=>$key) {
        //change in next line:
        if (strpos(mb_strtolower(($key),'UTF-8'),$q ) !== false) {
                array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($value)));
        }
        if (count($result) > 11)
                break;}

echo json_encode($result);

thanx for the replies guys :) it was clearer to me with a morning mindset+ coffee :)

any ideas on this: "also, as you will see in my code i have an array [id,name] with my current configuration, (even case sensitive) I search the name, the dropdown appears, when I click the name I want, the cell gets filled with the ID and when I submit the form, the id gets posted to the next PHP page.

Is there any way to have exactly the same thing but instead of filling the field with the id to fill it with the name? ie: search for name, get dropdown with names, click and get the name in the field, and when I submit I get the id posted?"