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 id
or class
and then set click event for the same or add javascript
function
$hint.= "<tr onClick ='hintVal(".$act_name.");'><td>".$act_name."</td></tr>";
In javascript:
function hintVal(trVal) {
alert('tr clicked');
alert('tr value:'+trVal);
}
Why can't you use Jquery Autocomplete
?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.