Hi:

I have a page which returns list persons. This page is accessed from a text box with AJAX. When user types in something, this page is accessed to get all the persons starting with that character(s).

It's working fine but there is one slight problem. It doesn't display correct names when users have accent in their names.

For example there is a user with last name "Magné" but it appears as:

Magn� (in Firefox)
Magn?a> (in IE)

Whats more is if I click that name to select it, it works in Firefox but not in IE.

Can anyone please tell me where I might be wrong?

The code I have is following

onchange.php
PHP Code:

<table width="100%" cellpadding="2" cellspacing="0">
    <
tr class="section">
        <
td align="center" class="closebox">
            
            <
a href="javascript:void(0);" onclick="autosuggest_hide('{$textbox}','{$resultsdiv}');">
                
(Close)
            </
a>
            <
div>
                {
$count_list_personsrecord(sfound.
            </
div>
        </
td>
    </
tr>
        {foreach 
from=$list_persons item=value key=key}
        {
cycle values="firstrow,secondrow" assign="row_color"}
    <
tr class="{$row_color}">
        <
td>
            <
a href="javascript:void(0);" onclick="autosuggest_select('{$textbox}','{$resultsdiv}','{$value.NAME|escape:"quotes"}','{$value.ID}',{$append},'{$append_str}');">
                {
$value.NAME}</a>
        </
td>
    </
tr>
        {/foreach}

</
table
Text box to select persons
Code:
<div id="id_preference_maindiv" style="position:absolute;top:115px;right:25px;width:200px;height:300px;border:none;display:none;">
			<iframe id="id_preference_iframe" frameborder="0" style="position:absolute;top:0px;left:0px;width:300px;height:300px;"></iframe>
			<div id="serial_results3" class="ajaxdropdown" />
			</div>
		</div>
template_barebone.php is simply template with <HTML> and <body> tags in it (and some meta tags)
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
meta name="Content-Language" content="en" />
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<
title>{$title|default:"Software"}</title>
{
literal}
<
script type="text/JavaScript" src="{/literal}{$tpl_dir}{literal}/js/ajax_dropdown.js"></script>
<script type="text/JavaScript" src="{/literal}{$tpl_dir}/js/js.js{literal}"></script>
</head>
<body>
        
        <div id="body_page">
            {$body|default:""}
        </div>
    
</body>
</html> 
ajax_dropdown.js
Code:
var last_type = 0;

function autosuggest(srcTextbox,textbox, resultsdiv, backendfile, extraquerystring,append,appendStr) {


  resultsdiv = document.getElementById(resultsdiv);

  var d = new Date();

   // if they aren't typing too fast or they haven't started typing
  if (d.getTime() - last_type > 100 || last_type == 0) {
    // start the request
    var objXML = zXmlHttp.createRequest();
      // open the ajax serials page and pass the search and company
	var joinChar = "?";
	if(backendfile.indexOf('?'))
	{
		joinChar = "&";
	}
	var url = backendfile + joinChar + "textbox=" + textbox.id + "&resultsdiv=" + 
          resultsdiv.id + "&append=" + append + "&append_str=" + appendStr   + "&search=" + srcTextbox.value + extraquerystring;

      objXML.open("get", url, true);
      objXML.onreadystatechange = function () {
        if (objXML.readyState == 4) {
          // success, so pass the result to the page

		autosuggest_show(srcTextbox.id,textbox.id,resultsdiv.id);



          result = objXML.responseText;

          if (result != "-1") {
            resultsdiv.innerHTML = result;
          } else {
            // an error (-1) was passed from the page
            autosuggest_hide(textbox.id,resultsdiv.id);
          }
        }
      }
      objXML.send(null);
    } else {
      // typing too fast, hide the box
       autosuggest_hide(textbox.id,resultsdiv.id);

    }

    // get the new last typed time
    var d = new Date();
    last_type = d.getTime();
}
function autosuggest_show(srcTextbox,textbox,resultsdiv)
{

	srcTextbox = document.getElementById(srcTextbox);

	resultsdiv = document.getElementById(resultsdiv);// display the box

    	resultsdiv.style.display='block';

	var pos = findPos(srcTextbox);

	resultsdiv.style.top = (pos[1] + 20) + 'px';
	resultsdiv.style.left = pos[0] + 'px';

	resultsdiv.style.top = '0px';
	resultsdiv.style.left = '0px';

	//Change positoin of div and iframe

	textbox_maindiv = document.getElementById(textbox + '_maindiv');
	textbox_iframe = document.getElementById(textbox + '_iframe');

	if(textbox_maindiv)
	{
    		textbox_maindiv.style.display='block';
		textbox_maindiv.style.top = (pos[1] + 20) + 'px';
		textbox_maindiv.style.left = pos[0] + 'px';
	}
	if(textbox_iframe)
	{
		textbox_iframe.style.display ='block';
		textbox_iframe.style.top = '0px';
		textbox_iframe.style.left = '0px';
	}

}
function autosuggest_hide(textbox,resultsdiv)
{
	textbox_maindiv = document.getElementById(textbox + '_maindiv');
	textbox_iframe = document.getElementById(textbox + '_iframe');
	
	resultsdiv = document.getElementById(resultsdiv);


	if(textbox_maindiv)
	{
		textbox_maindiv.style.top = '0';
		textbox_maindiv.style.top = '0';
		textbox_maindiv.style.display = 'none';
	}
	if(textbox_iframe)
	{
		textbox_iframe.style.top = '0';
		textbox_iframe.style.top = '0';
		textbox_iframe.style.display = 'none';
	}

	resultsdiv.style.display = 'none';
	
}
function autosuggest_select(textbox, resultsdiv, text,value,append,appendStr) {
  textbox_label = document.getElementById(textbox + '_label');
  

  textbox = document.getElementById(textbox);

  resultsdiv = document.getElementById(resultsdiv);
	if(append)
	{
		textbox.value = textbox.value + ((textbox.value =="")?value:appendStr + value);
		if(textbox_label)
		{
			textbox_label.value = textbox_label.value + ((textbox_label.value =="")?text:appendStr + text);
		}
	}
	else
	{
		textbox.value = value;
		if(textbox_label)
		{
			textbox_label.value = text;
		}
	}
	autosuggest_hide(textbox.id,resultsdiv.id);

}

function serial_onchange(srcTextbox,textbox, resultsdiv, page,extraParams,append,appendStr) {
	extraParams = (typeof extraParams == "undefined")?"":extraParams;
	append = (typeof append == "undefined")?0:append;
	appendStr = (typeof appendStr == "undefined")?"":appendStr;


  autosuggest(srcTextbox,textbox, resultsdiv, page,extraParams,append,appendStr);

}