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

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.