1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
use warnings;
use 5.014;
use utf8;
use Mojolicious::Lite;
use DBI;
my $table = 'my_test_table';
my $dbh = DBI->connect( 'dbi:SQLite:dbname=my_test_db.db', '', '',
{ RaiseError => 1, PrintError => 0, AutoCommit => 1, sqlite_unicode => 1, }
) or die $DBI::errstr;
$dbh->do( "CREATE TEMP TABLE $table ( firstname TEXT, lastname TEXT, id INTEGER UNIQUE )" );
my $sth = $dbh->prepare( "INSERT INTO $table ( firstname, lastname, id ) VALUES ( ?, ?, ?)" );
$sth->execute( 'Charlie', 'Harper', '321456' );
$sth->execute( 'Rachel Karen', 'Green', '253422' );
$sth->execute( 'John', 'Dorian', '433542' );
$sth->execute( 'Homer ☺', 'Simson', '433541' );
get '/eingabe';
get '/search_db/:opt' => sub {
my $self = shift;
my $opt = $self->param( 'opt' );
my $term = $self->param( 'term' );
my $ref;
if ( $opt eq 'autocomplete' ) {
my $sth = $dbh->prepare( "SELECT id FROM $table WHERE id LIKE ?" );
$sth->execute( $term . '%');
while ( my $row = $sth->fetchrow_arrayref() ) {
push @$ref, @$row;
}
} elsif ( $opt eq 'row' ) {
$ref = $dbh->selectall_arrayref( "SELECT * FROM $table WHERE id == ?", { Slice => {} }, $term );
die scalar @$ref if @$ref != 1;
$ref = $ref->[0];
}
$self->render( json => $ref );
};
app->start;
__DATA__
@@ eingabe.html.ep
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$( "#button_1" ).click( function() {
document.getElementById( "form_1" ).reset();
document.getElementById( "id" ).focus();
});
var searchID = '#id';
$( searchID ).autocomplete({
source: function( request, response ) {
$.getJSON( '/search_db/autocomplete', request, function( dataFromServer ) {
var suggestions = [];
var len = dataFromServer.length;
for ( var i = 0; i < len; i++ ) {
suggestions.push( dataFromServer[i].toString() );
}
if ( len == 1 ) {
$( searchID ).autocomplete( 'disable' );
$.getJSON( '/search_db/row', { term : suggestions[0] }, function( data ) {
for ( var key in data ) {
if( data.hasOwnProperty( key ) ) {
var input = document.getElementById( key );
input.value = data[key];
}
}
});
}
response( suggestions );
$( searchID ).autocomplete( 'enable' );
});
},
select: function( event, ui ) {
$.getJSON( '/search_db/row', { term : ui.item.value }, function( data ) {
for ( var key in data ) {
if( data.hasOwnProperty( key ) ) {
var input = document.getElementById( key );
input.value = data[key];
}
}
});
},
delay: 100
});
});
</script>
</head>
<body>
<form id="form_1">
<table>
<tr><td>Firstname:</td><td><input type="text" id="firstname" name="firstname" /></td><td></td></tr>
<tr><td>Lastname:</td><td><input type="text" id="lastname" name="lastname" /></td><td></td></tr>
<tr><td>ID:</td><td><input type="number" id="id" name="id" autofocus="on" /></td><td>
<button type="reset" id="button_1"> - </button></td></tr>
</table><br />
<input type="submit" value="OK"/>
</form>
</body>
</html>
Jemand zu Hause?![[twitter]](/battie/theme/default/icons/twitter.gif){kind=icon}
+3 replies![[default_avatar]](/battie/theme/default/default_avatar.gif){kind=avatar}
Schrift
use strict; use warnings;
Blog
Einstellungen![[feed]](/battie/theme/default/icons/feed.png){kind=icon}
Tags:
![[Powered by Battie]](/battie/img/powered.png)
