Question

I have a little problem. I want to do automatic searching, but there is a difference between the results from my webrequest (automatic) and the results if I just hit enter.

I want to results to be the exactly the same, the result should be the one I get when I hit enter.

Code request:

function showUser(str, str2)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
} 
xmlhttp.open("GET", "klanttabel.php?search=" + encodeURIComponent(str) + "&search2=" +       encodeURIComponent(str), true);
xmlhttp.send();
}

Code query (wich gives me the right results)

if($search != ''){

$where[] = "( klant_id LIKE '%" .$search."%' OR  voornaam LIKE '%" .$search."%' OR     achternaam LIKE '%" .$search."%' OR email LIKE '%"        .$search."%' OR plaats LIKE '%"   .$search."%' OR bedrijfsnaam LIKE '%" .$search."%' ) ";

if($search2 != ''){
$where[] = " ( klant_id LIKE '%" .$search2."%' OR voornaam   LIKE '%" .$search2."%' OR   achternaam LIKE '%" .$search2."%' OR email LIKE '%" .$search2."%' OR   plaats LIKE '%"   .$search2."%' OR bedrijfsnaam LIKE '%" .$search2."%') ";
}
$query_where = (is_array($where))?" WHERE ".implode(" AND ", $where):""; 
$result = mysql_query("SELECT * FROM klant ".$query_where." ORDER BY klant_id DESC");
$i = 0;
}

I have two input fields, so that you can search for two different values. When I type them in and hit enter, it gives me the corresponding result.

But if I let it do it automatically, it just gives the result from the last field I typed in to.

So basically, it just searches for the last field. I think it has something to do with my input fields, so here is the code for that:

<form method="get">
<input onfocus="this.value=''" type="text" name="search" value="Naam..."    onkeyup="showUser(this.value)"></input><br />

<input onfocus="this.value=''" type="text" name="search2" value="Plaats..."  onkeyup="showUser(this.value)"></input><input type="submit" value="zoeken" name="submit2"   </input></form>

Answer 1

A more elegant solution instead of using native XMLHttpRequests and all other workarounds is jQuery.ajax. Also, other things:

• Input elements don’t have a closing </input>.

A modified example that works on jsFiddle: http://jsfiddle.net/e9drS/.

HTML:

<form id="form">
    <input type="text" id="search" name="search" value="Naam..." />

    <br />

    <input type="text" id="search2" name="search2" value="Plaats..." />

    <input type="submit" value="zoeken" />
</form>

JavaScript:

$(function() {

$('#search, #search2').focus(function() { // clear on focus
    $(this).val('');
}).keyup(function() { // perform request on keyup
    $.ajax({ type: 'GET',
             url:  'klanttabel.php',
             data: { search:  $('#search').val(),
                     search2: $('#search2').val() },
             success: function(text) {
                 $("#txtHint").html(text);
             }
           });
});

});