</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/5962808/onchange-is-called-only-when-the-element-loses-focus" dir="ltr">onChange is called only when the element loses focus</a>
<span class="question-originals-answer-count">
(2 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2014-12-17 12:50:43Z" class="relativetime">5 years ago</span>.</div>
</div>
</aside>
My code tries to implement a keyword search box using AJAX to get live results while writing, but i can't do it. However, when i go keyboard ENTER it searches. My problem is really while writing not to have to press ENTER .
example i would like to implement: http://expresso.sapo.pt/ranking-das-escolas-2013=f840093
index.html:
<!DOCTYPE html>
<html>
<head>
<title> Escolha de molecula</title>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("ajax").innerHTML="";
return;
}
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("ajax").innerHTML=xmlhttp.responseText;
}
}
var txq=document.getElementById("textquery").value;
xmlhttp.open("POST","output.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("textquery=" + txq);
}
</script>
</head>
<body>
<h1 style="text-align:center;font-size: 60px">
Search for molecule in our database
</h1>
<hr>
<p style="color:blue">
<q>
I have lived much of my life among molecules. They are good company.
</q>
George Wald
</p>
<hr>
<p style="font-family:verdana">
just write something in the search bar and it will retrieve it <br>
More information at: <a href="http://xldb.fc.ul.pt/" target="_blank">http://xldb.fc.ul.pt/</a>
</p>
search: <input type="text" id="textquery" onchange="showUser()" ><br>
</form>
<br>
<div id="ajax"><b>search results will be shown here</b></div>
</body>
</html>
output.php:
<?php
$con=mysqli_connect("127.0.0.1","","","ulchemd");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$pesquisa =mysqli_real_escape_string($con, $_POST['textquery']);
$resposta = mysqli_query($con,"SELECT * from target WHERE molecule.target_text like '%$pesquisa%' ");
echo " <b> Search results:";
echo "<table border='5'>
<tr>
<th>ID</th>
<th>target_type</th>
<th>name</th>
<th>text</th>
</tr>";
while($row = mysqli_fetch_array($resposta)) {
//este while vai buscar cada linha da tabela num ciclo como um cursor
echo "<tr>";
echo "<td>" . $row['tid'] . "</td>";
echo "<td>" . $row['target_type'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['target_text'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Thanks a lot :)
</div>
Change
onchange="showUser()"
to
onkeyup="showUser()"
onchange
event occurs when element gets out of focus, that is blur.
That is why its not searching live.
onkeyup
fires when user presses any key in the text box, which is needed here.