View Full Version : Javascript autosuggest problem

07-28-2009, 06:45 AM
Hello people! :)

I am a beginner and am not familiar with Javascript. I am currently coding for an autocomplete function.

This has to work just like in hotmail whereby when a user types in characters in a textbox which are similar to that in the database, the results from the database is shown and when a user clicks on one of the suggestions, the value is displayed in the textbox.

I managed to code for most of it but I am having deep troubles in making the value be displayed in the textbox when a user clicks on it.

Any help will be greatly appreciated.

<style type="text/css">
/* ---------------------------- */
#results{width:260px; border:solid 1px #000000; display:none; cursor:default;}
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
#results li {border-top:solid 1px #DEDEDE;}
#results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
#results li a small{display:block; text-decoration:none; color:#000000; font-weight:normal;}
#results ul {padding:6px;}

a:link {color:#000000;text-decoration: none} /* unvisited link */
a:visited {color:#000000;text-decoration: none} /* visited link */
a:hover {color:#FFFFFF; background-color:#003366;text-decoration: none} /* mouse over link */
a:active {color:#000000;text-decoration: none} /* selected link */

<td class="td2">
$link = mysql_connect("", "", "");
if (!$link) {
die('Not connected : ' . mysql_error());
$db_selected = mysql_select_db("springdb", $link);
if (!$db_selected) {
die ('Can\'t use foo : ' . mysql_error());
$result = mysql_query("SELECT `contact_first_name`, `contact_last_name`, `contact_email` FROM `1_contact` WHERE (`contact_first_name`, `contact_last_name`, `contact_email`) LIKE '%$last_token%' ORDER BY `contact_email`;");

while($row = mysql_fetch_assoc($result))

$text = '"'.$row["contact_first_name"]." ".$row["contact_last_name"].'"'."<".$row["contact_email"].">";
$text_array = $token;
$text_array[sizeof($text_array)-1] = $text;
$text = join(",",$text_array);

$html = '"'.$row["contact_first_name"]." ".$row["contact_last_name"].'"'."[".$row["contact_email"]."]";
$html = preg_replace("/".$last_token."/i","<b>$last_token</b>",$html);
$html = str_replace("[","&lt;",$html);
$html = str_replace("]","&gt;",$html);

$item = array("text"=>$text,"html"=>$html);
return $items;
<form id="form1" method="post">
<?php echo $koolajax->Render();?>
<textarea name="search-q" id="search-q" type="text" style="width:620px;height:60px;font-family:Arial;" onkeyup="javascript:autosuggest()"></textarea>
<div id="results"></div>
<div style="padding-top:10px;padding-left:0px;">
<i>*Note:</i> Use comma (,) to seperate the emails

function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
request_type = new XMLHttpRequest();
return request_type;

var http = createObject();

function autosuggest() {
q = document.getElementById('search-q').value;
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
function autosuggestReply() {
if(http.readyState == 4){
var response = http.responseText;
e = document.getElementById('results');
} else {