note
poj
<p>Here's a very simple demo of an auto-complete input field using html/mysql/json</p>
HTML file
<c>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select : </label>
<input id="autocomplete">
<script>
$( "#autocomplete" ).autocomplete({
source: "http://localhost/test/data.cgi",
});
</script>
</body>
</html>
</c>
data.cgi to provide data
<c>
#!/usr/bin/perl
use CGI;
use DBI;
use JSON;
my $dbh = get_dbh(); # your connect details
# test data
$dbh->do('CREATE TEMPORARY TABLE json (
col1 char(3))');
for ("ABC", "BCD", "CDE", "DEF", "EFG", "FGH", "GHI"){
$dbh->do('INSERT INTO json VALUES (?)',undef,$_);
}
# query database
my $q = CGI->new();
my $sth = $dbh->prepare('SELECT * FROM json WHERE col1 like ?');
$sth->execute('%'.$q->param('term').'%');
my @data=();
while ( my @f = $sth->fetchrow_array){
push @data,$f[0];
}
print "Content-type: application/json; charset=iso-8859-1\n\n";
print JSON::to_json(\@data);
</c>
poj
1050351
1050485