Log in

View Full Version : Help please!! Combo Box


bryonythompson
02-09-2012, 01:13 PM
Hello,

I am very new to HTML and PHP but have managed to create a drop down "Surname" box on my website to list all the current surnames in my mySQL database. However, I also want the user to be able to type into the box and for the drop down list to automatically filter depending on the text the user inserts.

I understand that this is not possible in HTML and PHP and requires some JavaScript, however I have never used this before and have no idea where to start.

Any suggestions or help will be much appreciated. Here is my current HTML and PHP code...



$sql="SELECT Surname FROM Patients";
$result=mysql_query($sql);
?>

<form name="form" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">

Surname: <?php echo "<select name=\"surname\">"; echo "<option size =30 ></option>";
while($row = mysql_fetch_array($result))
{
echo "<option value='".$row['Surname']."'>".$row['Surname']."</option>";
}
echo "</select>";
?>


Thank you!
vwphillips
02-09-2012, 02:50 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
<!--

function Filter(id,value){
var sel=document.getElementById(id);
if (!Filter[id]){
for (var ary=[],z0=0;z0<sel.options.length;z0++){
ary[z0]=sel.options[z0];
}
Filter[id]=ary;
}
var ary=Filter[id],z0=0,value=value.replace(/\s/g,'');
sel.options.length=0;
for (;z0<ary.length;z0++){
if (value.length==0||(ary[z0].value.substring(0,value.length).toLowerCase()==value.toLowerCase())){
sel.options[sel.options.length]=new Option(ary[z0].text,ary[z0].value);
}
}
sel.selectedIndex=0;
}
//-->
</script></head>

<body>
<select id="tst" >
<option >Select Name</option>
<option value="Tom1" >Tom1</option>
<option value="Tom2" >Tom2</option>
<option value="Tom3" >Tom3</option>
<option value="Dick1" >Dick1</option>
<option value="Dick2" >Dick3</option>
<option value="Dick3" >Dick3</option>
</select>
<input name="" onkeyup="Filter('tst',this.value);">

</form>

</body>

</html>