Saturday, May 01, 2010

Autocompletion-Felder mit jQuery

Hier nur ein kurzes Beispiel, wie mit jQuery und einem ganz simplen CGI-Skript ein Autocompletion-Feld erstellt werden kann.

Als erstes mal die HTML-Datei:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css"/>
<script src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript">
$(document).ready( function() {
function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}

function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}

$("#auto_test").autocomplete( "auto.cgi", {
width: 260,
selectFirst: false
} );
});
</script>
</head>
<body>
<input type="text" id="auto_test"/>
</body>
</html>


Und hier noch das einfache CGI-Skript:

#!/usr/bin/perl

use strict;
use warnings;
use CGI;

my $cgi = CGI->new;
print $cgi->header;

my %params = $cgi->Vars;
for my $key ( keys %params ) {
print "$key -> $params{$key}\n";
}

No comments: