comment on

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

In reply to Re^3: How do I mix up Perl and jQuery (for beginners) by poj
in thread How do I mix up Perl and jQuery (for beginners) by eyekona

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


Perl Monk, Perl Meditation
	PerlMonks