Javascript Autocomplete

Javascript Autocomplete

Javascript Autocomplete is a javascript that can give sugestion to the user when seraching value in the text area. Then user can chose among the given sugestions. Because we also use database then we will need Jquery and php to access the data.

Lets just jump to the Javascript Autocomplete code.

First the HTML one (index.html):

<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="engine.js"></script>
<input type="hidden" id="choose" value="0" />
<div id="ch0" style="display:none"></div>
<input type="text" onblur="check(this.value)" id="search" onkeyup="check(this.value);"/>
<div id="result"></div>

Second the Javascript code (engine.js):

function check(val){
	if(event.keyCode == 40||event.keyCode == 38){
		choose(event.keyCode);
	}else{
		$.post("test.php",{val:val} , function(data){document.getElementById("result").innerHTML =data;});
		document.getElementById('choose').value = 0;
	}
}

function choose(evnt){
	chs = document.getElementById('choose').value;
	chs = parseInt(chs);
	if(evnt == 40){
		chs2 = chs+1;
	}else{
		chs2 = chs-1;
		if(chs < 0)chs = 0;
	}
	selc = document.getElementById('ch'+chs2);
	selcold = document.getElementById('ch'+chs);
	if(selc){
		selc.style.backgroundColor = "blue";
		document.getElementById('search').value = selc.innerHTML;
		selcold.style.backgroundColor = "white";
	}
	else{
		chs2=chs;
	}
	document.getElementById('choose').value = chs2;
}

Last is the php file (test.php)

$link = mysql_connect('localhost', 'root', '');
if (!$link) {
    die();
}
$dbname = 'member';
mysql_select_db($dbname);

$val = $_POST['val'];
if($val == '') break;
$q = "select name from client where name like '$val%'";
$e = mysql_query($q);
$i=0;
while($r = mysql_fetch_array($e)){
	$i++;
	echo '<div id="ch'.$i.'">'.$r['name'].'</div>';
}

When you type something in the textbox, then Javascript Autocomplete will search posible match for the inputed value. When you pres the down/up button, the Javascript Autocomplete will navigate to the sugestions.

 

http://septiadi.com/2011/04/28/javascript-autocomplete/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: