I am creating a social website.I have a text box in search.php to search the venues which are stored in database.When user starts typing the name of the venue,list of venue names stored in database should be loaded into the div venuesearch. This works fine.My problem is that I need to make the row inside the div venuesearch clickable, so that when the user clicks a particular row,that value should come to the text box.
search.php
<script language="javascript">
function showData(str)
{
if (str.length==0)
{
document.getElementById("venuesearch").innerHTML="";
document.getElementById("venuesearch").style.border="0px";
return;
}
var venue_data = document.getElementById("venue").value;
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("venuesearch").innerHTML=xmlhttp.responseText;
document.getElementById("venuesearch").style.border="1px solid #A5ACB2";
document.getElementById("venuesearch").style.zIndex = "100";
}
}
xmlhttp.open("GET","aj_search.php?venue="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<input id="venue" name="venue" type="text" onkeyup="showData(this.value)" value="Tag venue name"/>
<div id="venuesearch">
</div>
</body>
aj_search.php
<?php
$dbhandle=mysql_connect("localhost","root","")or die("Unable to connect");
$select=mysql_select_db("scenekey",$dbhandle) or die("Unable to connect");
if(isset($_GET['venue']))
{
$venue_name = $_GET['venue'];
}
$hint='';
$query_get_venue = "SELECT * from sk_accounts WHERE acnt_member_class='venue' and acnt_fname LIKE '".$venue_name."%'";
$result_query_get_venue = mysql_query($query_get_venue);
$row_count = mysql_num_rows($result_query_get_venue);
if($row_count > 0)
{
$hint = "<table>";
while($row = mysql_fetch_array($result_query_get_venue))
{
$act_fname = $row['acnt_fname'];
$act_lname = $row['acnt_lname'];
$act_name = $act_fname . ' ' . $act_lname;
$hint.= "<tr><td>".$act_name."</td></tr>";
}
$hint .= "</table>";
}
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
Add
idorclassand then set click event for the same or addjavascriptfunctionIn javascript: