Currently, I am utilizing AJAX to perform a keyword search on a MySQL database. The issue arises when the results are displayed and I attempt to click on an option, as it generates a reference error in Firebug. Here is the code snippet:
<html>
<body>
<style>
#displayDiv {
background-color: #ffeeaa;
width: 200;
}
</style>
<script type="text/javascript">
function handleClick(selectedItem) {
var selected = selectedItem;
alert(selected);
}
</script>
<script type="text/javascript">
function ajaxFunction(searchTerm) {
var httpxml;
try {
// Firefox, Opera 8.0+, Safari
httpxml = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
httpxml = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
function handleState() {
if (httpxml.readyState == 4) {
document.getElementById("displayDiv").innerHTML = httpxml.responseText;
}
}
var url = "search.php";
url = url + "?txt=" + searchTerm;
url = url + "&sid=" + Math.random();
httpxml.onreadystatechange = handleState;
httpxml.open("GET", url, true);
httpxml.send(null);
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" onkeyup="ajaxFunction(this.value);" name="username"/>
<div id="displayDiv"></div>
</form>
</body>
Below is the content of the search.php file:
<?php
include ("dbinfo.php");
$keyword = $_GET['txt'];
$message = "";
if (strlen($keyword) > 0 and strlen($keyword) < 20) {
$query = mysql_query("select RubroId, RubroDisp from rubros where KeyWords like '$keyword%'");
while ($row = mysql_fetch_array($query)) {
$value = $row[RubroDisp];
$encodedValue = str_replace(" ", "_", $valor);
echo "<a href='#' onclick='handleClick($encodedValue);'>$value</a><br />";
}
}
?>
You can view the functioning page by visiting this URL.
Could you please provide guidance on resolving this issue or point out any mistakes I may have made?
Thank you.