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...

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

Code:

<!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>

Thread: Help please!! Combo Box

Thread Tools

Search Thread

Help please!! Combo Box

Bookmarks

Bookmarks

Posting Permissions