Help please! Autosuggestion or type ahead drop down list

alohaaaron · Oct 6, 2008

Hi, I'd like to create an auto suggestion or type-ahead search button where the user types in the word they are searching for and as they type it offers suggestions in a drop-down box below the field and eliminates choices as they continue to type (just like

http://www.google.com

!!!)

For my purpose I often search for last names like Smith and Johnson so I need to have that drop-down so I can see the differences between the like names. The names will be queried from a database in real time.

This example is close

http://www.webreference.com/programming/javascript/ncz/index.html

but does not give the drop-down or search from a database.

Thanks!

Zhris · Oct 6, 2008

You could use an AJAX XML HTTP Request to call an external script (e.g. php) which can i.e. access database information (for drop down menu and to seach from the database). Using some javascript it can be called every second.

Heres an example...

HTML

Code:

<html>
<head>
<script type="text/javascript">
var xmlHttp=null;

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
try
  {// Firefox, Opera 8.0+, Safari, IE7
  xmlHttp=new XMLHttpRequest();
  }
catch(e)
  {// Old IE
  try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e)
    {
    alert ("Your browser does not support XMLHTTP!");
    return;  
    }
  }
var url="Query.php?Query=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</script> 
</head>
<body>

<font face="arial" size="2">
<form>
Type A, B or C:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>You Typed: <b><span id="txtHint"></span></b></p> 

</body>
</html>

Query.php

Code:

<?
$Query = $_GET['Query'];

if ($Query == 'a') {
	echo "You Typed: A";
}
elseif ($Query == 'b') {
	echo "You Typed: B";
}
elseif ($Query == 'c') {
	echo "You Typed: C";
}
else {
	echo "You Did Not Type A Known String";
}
?>

Chris

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help please! Autosuggestion or type ahead drop down list

alohaaaron

Programmer

Zhris

Programmer

Similar threads

Part and Inventory Search

Sponsor