karlosio
12-08-2008, 10:39 PM
Hi I'm currently learning myself how to use the script.aculo.us framework and i thought I'd try out a little basic script to see how the ajax functions work.
The script is querying a mysql database to get and display a list of countries and place them in an unordered list for the user to choose from and displays once he starts typing into a text box.
But im having a bit of trouble with it, when i start typing a letter say 'L' the list appears ok like below:
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
but say if I wanted luxembourg and I typed 'Lu' the list disappears instead of displaying luxembourg! I've noticed I had to put the Mysql LIKE wildcard symbol % at the end after the variable to check, if I put it at the front before the variable it seems to spit all of them out.
secondly If I choose an option and hit enter the form submits itself, so ive put return false in the onsubmit attribute for the time being but is there another way to prevent the form submitting itself if i hit enter on that field.
And thirdly, it doesnt seem to work in firefox, its doesnt display the menu. It runs ok but kinda slow response in IE but runs fine in opera (apart from the probs above) any ideas? :confused:
here is the html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
new Ajax.Autocompleter('textfield','result','serverSideScript.php',{});
}
</script>
<style type="text/css">
body {
font-family: "Century Gothic", Arial, Tahoma, sans-serif;
}
ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
cursor: hand;
border: 1px solid #000;
border-bottom: none;
}
li {
border-bottom: 1px solid #000;
font-weight: bold;
padding: 5px;
font-size: .8em;
}
.selected {
background-color: #00CC99;
color: #fff;
}
</style>
</head>
<body>
<form>
<div>
<label>Country:</label>
<input type="text" id="textfield" name="textfield" />
<div id="result"></div>
</div>
</form>
</body>
</html>
The server side script
<?php
$server = 'localhost';
$user = 'root';
$pw = '';
$db = 'test';
mysql_connect($server,$user,$pw);
mysql_select_db($db);
$textfield = $_POST['textfield'];
$testval = "L";
$sql = "SELECT * FROM country WHERE countryName LIKE '".$textfield."%'";
$res = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_assoc($res);
echo '<ul>';
if($res) {
while($row = mysql_fetch_assoc($res))
{
echo "<li>".$row['countryName']."</li>";
}
}
echo '</ul>';
?>
The script is querying a mysql database to get and display a list of countries and place them in an unordered list for the user to choose from and displays once he starts typing into a text box.
But im having a bit of trouble with it, when i start typing a letter say 'L' the list appears ok like below:
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
but say if I wanted luxembourg and I typed 'Lu' the list disappears instead of displaying luxembourg! I've noticed I had to put the Mysql LIKE wildcard symbol % at the end after the variable to check, if I put it at the front before the variable it seems to spit all of them out.
secondly If I choose an option and hit enter the form submits itself, so ive put return false in the onsubmit attribute for the time being but is there another way to prevent the form submitting itself if i hit enter on that field.
And thirdly, it doesnt seem to work in firefox, its doesnt display the menu. It runs ok but kinda slow response in IE but runs fine in opera (apart from the probs above) any ideas? :confused:
here is the html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
new Ajax.Autocompleter('textfield','result','serverSideScript.php',{});
}
</script>
<style type="text/css">
body {
font-family: "Century Gothic", Arial, Tahoma, sans-serif;
}
ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
cursor: hand;
border: 1px solid #000;
border-bottom: none;
}
li {
border-bottom: 1px solid #000;
font-weight: bold;
padding: 5px;
font-size: .8em;
}
.selected {
background-color: #00CC99;
color: #fff;
}
</style>
</head>
<body>
<form>
<div>
<label>Country:</label>
<input type="text" id="textfield" name="textfield" />
<div id="result"></div>
</div>
</form>
</body>
</html>
The server side script
<?php
$server = 'localhost';
$user = 'root';
$pw = '';
$db = 'test';
mysql_connect($server,$user,$pw);
mysql_select_db($db);
$textfield = $_POST['textfield'];
$testval = "L";
$sql = "SELECT * FROM country WHERE countryName LIKE '".$textfield."%'";
$res = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_assoc($res);
echo '<ul>';
if($res) {
while($row = mysql_fetch_assoc($res))
{
echo "<li>".$row['countryName']."</li>";
}
}
echo '</ul>';
?>