Re^3: How do I mix up Perl and jQuery (for beginners)

Here's a very simple demo of an auto-complete input field using html/mysql/json

HTML file

<!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/s
+moothness/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>
[download]

data.cgi to provide data

#!/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);
[download]

poj

Comment on Re^3: How do I mix up Perl and jQuery (for beginners) Select or Download Code