Ajax search from mysql databse unicode failure - php

Question

I hope moderators doesn't mark this question as duplicated cause i research for this problem almost 1week and can't figure out what is wrong.
I have this code, for searching data from MySQL database tables, atm it doesn't read Unicode chars. My guess is $_GET function string to read Unicode chars, because of that, I sated MySQL table charset to utf-8 and columns collation are utf8_general_ci and also I added this two lines into php code:
header('Content-Type: text/html; charset=utf-8');
mysqli_set_charset($connect,'utf8');
but still the result of Unicode chars are 0. If I type "a" in input, it shows the all words which starts by "a" or "ä,å á..." but, if I type some Unicode char for example "ä" it says "no result founded".
Code is also online atm here is the link http://dic.munjutut.fi/php/
Also I have added utf-8 meta to HTML file. I hope someone tell me what is wrong. The code itself is:
header('Content-Type: text/html; charset=utf-8');
mysqli_set_charset($connect,'utf8');
if(isset($_GET['p'])) {
$page_number = $_GET['p'];
$arraySearch = $_GET['terms'];
$show_count = $_GET['count'];
settype($page_number, 'integer');
}
$nospaces = substr($_GET['terms'],1,4);
$offset = ($page_number - 1) * $records_number;
// check for an empty string and display a message.
if ($_GET['terms'] == "") {
echo '<div id="counter">Type "äää" or "ääää"!</div>';
// minim 3 characters condition
} else if(strlen($_GET['terms']) < $limitchar) {
echo '<div id="counter">'. $limitchar .' characters minimum</div>';
} else {
// explode search words into an array
$arraySearch = explode(" ", $_GET['terms']);
// table fields to search
$arrayFields = array(0 => $first_field, 1 => $second_field);
$countSearch = count($arraySearch);
$a = 0;
$b = 0;
$query = "SELECT * FROM $table_name WHERE (";
$countFields = count($arrayFields);
while ($a < $countFields)
{
while ($b < $countSearch)
{
$query = $query."$arrayFields[$a] LIKE '$arraySearch[$b]%'";
$b++;
if ($b < $countSearch)
{
$query = $query." AND ";
}
}
$b = 0;
$a++;
if ($a < $countFields)
{
$query = $query.") OR (";
}
}
$query = $query.") LIMIT $offset, $records_number;";
$search = mysqli_query($connect, $query);
// get number of search results
$arrayFields = array(0 => $first_field);
$countSearch = count($arraySearch);
$a = 0;
$b = 0;
$query = "SELECT * FROM $table_name WHERE (";
$countFields = count($arrayFields);
while ($a < $countFields)
{
while ($b < $countSearch)
{
$query = $query."$arrayFields[$a] LIKE '%$arraySearch[$b]%'";
$b++;
if ($b < $countSearch)
{
$query = $query." AND ";
}
}
$b = 0;
$a++;
if ($a < $countFields)
{
$query = $query.") OR (";
}
}
$query = $query.")";
$count_results = mysqli_query($connect, $query) or die(mysqli_error($connect));
$numrows = mysqli_num_rows($count_results);
// no results
if($numrows == 0) {
echo '<div id="counter">No results found</div>';
// show results
} else {
echo '<div id="results">
<div id="results_top"><p><b>'. $_GET['terms'] .'</b> - '. $numrows .' results found</p></div>
';
Ajax codes in 2 file:
search_id = '';
function handleHttpResponse() {
if (http.readyState == 4) {
if (search_id != '') {
document.getElementById(search_id).innerHTML = http.responseText;
}
}
}
function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
function getScriptPage(div_id,terms_id,get_count,get_p) {
search_id = div_id;
zearch = document.getElementById(terms_id).value;
http.open("GET", "search.php?terms=" + escape(zearch)+"&count="+get_count+"&page="+get_p, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
and
function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// show_results will be filled with new page
document.getElementById("show_results").innerHTML = xmlHttp.responseText;
document.getElementById("show_results").scrollIntoView();
}
}
function htmlData(url, terms, pag)
{
if (url.length==0)
{
document.getElementById("show_results").innerHTML = "";
return;
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
url=url+"?"+terms+"&"+pag;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true) ;
xmlHttp.send(null);
}

Answer 1

#CBroe fixed this for me! Big thanks for him! Problem was with AJAX and encoding. I used escape function instead encodeURIComponent. Here the fixed code:
Old one:
http.open("GET", "search.php?terms=" + escape(zearch)+"&count="+get_count+"&page="+get_p, true);
Fixed:
http.open("GET", "search.php?terms=" + encodeURIComponent(zearch)+"&count="+get_count+"&page="+get_p, true);