Mojolicious :: Lite jQuery Автозаполнение Вопрос - PullRequest
Новая
       10

Mojolicious :: Lite jQuery Автозаполнение Вопрос

1 голос
/ 09 сентября 2011

Автозаполнение не работает: весь подход неправильный или я допустил только некоторые ошибки? 

#!/usr/local/bin/perl
use warnings; use 5.014; use utf8;
use Mojolicious::Lite;
use DBI;
my $dbh = DBI->connect( ... ) or die $DBI::errstr;
my $table = 'my_table';

get '/input' => sub {
    my $self = shift;
    $self->render( 'input' );
};

get '/search_db' => sub {
    my $self = shift;
    my $col = $self->param( 'col' );
    my $sth = $dbh->prepare( "SELECT $col FROM $table" );
    $sth->execute();
    my $ref;
    while ( my $row = $sth->fetchrow_arrayref() ) {
        push @$ref, @$row;
    }
    $self->render( json => $ref );
};

app->start;

__DATA__
@@ input.html.ep
<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="/js_local/development-bundle/jquery-1.6.2.js"></script>
    <script src="/js_local/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="/js_local/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="/js_local/development-bundle/ui/jquery.ui.position.js"></script>
    <script src="/js_local/development-bundle/ui/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#vorname").autocomplete({
                source: '/search_db?col=vorname',
                minLength: 2
            });
        });
    </script>
</head>
<body>
<form>
    <table>
        <tr><td>Vorname:</td><td><input type="text" id="vorname" 
        name="vorname" autocomplete="off"/></td></tr>
        <tr><td>Nachname:</td><td><input type="text" id="nachname" 
        name="nachname" autocomplete="on" /></td></tr>
    </table><br />
    <input type="submit" value="OK"/>
</form>
</body>
</html>

Я думаю, что я на шаг впереди: теперь после второго символа я получаю все именапоявляются как выбор.

Ответы [ 3 ]

2 голосов
/ 09 сентября 2011

У вас есть дополнительная запятая после minLength: 

$(function() { 
    $("#vorname").autocomplete({ 
        source: '/search_db?col=vorname', 
        minLength: 2, 
    }); 
});

Попробуйте для начала!

1 голос
/ 09 сентября 2011

Я не вижу, где вы заявляете $table?Запустив оба скрипта из командной строки, я получил: 

Global symbol "$table" requires explicit package name at mojo_test2.pl line 19.
mojo_test2.pl had compilation errors.
0 голосов
/ 09 сентября 2011

Я нашел решение: 

#!/usr/local/bin/perl
use warnings;
use 5.014;
use utf8;
use Mojolicious::Lite;
use DBI;

my $table = 'my_table';
my $dbh = DBI->connect( ... ) or die $DBI::errstr;

get '/eingabe' => sub {
    my $self = shift;
    $self->render( 'eingabe' );
};

get '/search_db/:col' => sub {
    my $self = shift;
    my $col = $self->param( 'col' );
    my $term = $self->param( 'term' );
    my $sth = $dbh->prepare( 
                  "SELECT DISTINCT $col FROM $table WHERE $col LIKE ?" 
              );
    $sth->execute( $term . '%');
    my $ref;
    while ( my $row = $sth->fetchrow_arrayref() ) {
            push @$ref, @$row;
    }
    $self->render( json => $ref );
};

app->start;

__DATA__
@@ eingabe.html.ep
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="/development-bundle/jquery-1.6.2.js"></script>
    <script src="/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="/development-bundle/ui/jquery.ui.position.js"></script>
    <script src="/development-bundle/ui/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            var data = [];
            var form = document.forms[0];
            var formEls = form.elements;
            var elLen = formEls.length;
            for ( var i = 0; i < elLen; ++i ) {
                if ( formEls[i].type != 'submit' ) {
                    data.push( formEls[i].id );
                }
            }
            var dLen = data.length;
            for ( i = 0; i < dLen; i++ ){
                $( "#" + data[i] ).autocomplete({
                    delay: 100,
                    minLength: 2,                                 
                    source: '/search_db/' + data[i]
                });
            }
        });
    </script>
</head>
<body>
    <form>
        <table>
            <tr><td>Vorname:</td><td><input type="text" id="vorname" 
            name="vorname" autocomplete="off" autofocus="on" /></td></tr>
            <tr><td>Nachname:</td><td><input type="text" id="nachname" 
            name="nachname" autocomplete="on" /></td></tr>
        </table><br />
        <input type="submit" value="OK"/>
    </form>
</body>
</html>
...