Mojolicious::Lite jQuery 自动完成问题答案

【问题标题】：Mojolicious::Lite jQuery autocomplete QuestionMojolicious::Lite jQuery 自动完成问题
【发布时间】：2026-01-20 03:10:02
【问题描述】：

自动完成功能不起作用：是整个方法错误还是我只犯了一些错误？

#!/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>

我想我更进一步：现在在第二个字符之后，我得到所有名称都显示为一个选择。

【问题讨论】：

您在 javascript 控制台中看到任何错误吗？ js文件的路径是否正确？
好的，您的网络服务器日志中显示了什么？
您确定您从未到达die $col; 行吗？对我来说，您的请求似乎已执行并在该行终止，因此您会看到代码 500。另外，当 Mojolicious 终止时附加控制台输出或日志内容可能会很好？
当我删除 die $col; 我得到同样的错误。
@sid_com 你真的需要在它死去的地方显示服务器的日志

标签： jquery perl autocomplete mojolicious

【解决方案1】：

minLength 后面多了一个逗号：

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

尝试一下！

【讨论】：

去掉了示例中的逗号

【解决方案2】：

我没看到你在哪里声明$table？从命令行运行你的两个脚本我得到了：

Global symbol "$table" requires explicit package name at mojo_test2.pl line 19.
mojo_test2.pl had compilation errors.

【讨论】：

【解决方案3】：

我找到了解决办法：

#!/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>

【讨论】：