来自Perl的JQuery Autocomplete

时间:2011-04-30 11:29:03

标签: perl jquery-ui jquery

我正在努力确定失败的地方。我可以在我的本地PC上使用php / jquery来使用这个插件,但尝试在我的生产盒上用Perl复制它(其中php不是一个选项,因为我不会进入)。

index.cgi - 这是生成包含文本框的html页面的perl代码。

#!/usr/bin/perl -w 

use DBI;
use CGI;
use warnings;
use strict;

$cgi = new CGI;
$cgi->autoEscape(undef);
print $cgi->header;
print $cgi->start_html(-title=>'test',
                        -dtd=>'//W3C//DTD HTML 4.01 Transitional//EN',
                        -style=>'/themes/ui-lightness/jquery.ui.all.css',
                        -script=>[
                                {-type=>'javascript', -src=>'/js/jquery-1.5.2.min.js'},
                                {-type=>'javascript', -src=>'/js/test.js'},
                                {-type=>'javascript', -src=>'/ui/jquery-ui-1.8.11.custom.js'},
                                {-type=>'javascript', -src=>'/ui/jquery.ui.core.js'},
                                {-type=>'javascript', -src=>'/ui/jquery.ui.widget.js'},
                                {-type=>'javascript', -src=>'/ui/jquery.ui.position.js'},
                                {-type=>'javascript', -src=>'/ui/jquery.ui.autocomplete.js'}
                        ]
        );

print $cgi->start_div({-class=>'ui-widget'});
print $cgi->textfield(-id=>'customer',-size=>25),$cgi->br;
print $cgi->end_div(),$cgi->br;
print $cgi->div({-class=>'ui-widget-content',-id=>'log'});
print $cgi->end_html;

test.pl - 这是在后台运行以将JSON提供给自动完成的代码:

#!/usr/bin/perl 
use warnings;
use strict;
use CGI;
use DBI;
use JSON;

my $cgi = CGI->new;
print $cgi->header(-type => "application/json", -charset => "utf-8");
my $dbh = DBI->connect('dbi:mysql:hostname=test;database=test',"test","test");
my $term = $cgi->param('term');
my $sth = $dbh->prepare(qq{SELECT customer.name, customer.id FROM test WHERE customer.name ?;}) or die $dbh->errstr;
$sth->execute($term.'%') or die $sth->errstr;
my $json = {};
while(my @customer = $sth->fetchrow_array()) {
   $json->{$customer[0]} = $customer[1];
}
print JSON::to_json($json);

test.js - 这是正在使用的实际JQuery:

$(function() {
        function log( message ) {
                $( "<div/>" ).text( message ).prependTo( "#log" );
                $( "#log" ).attr( "scrollTop", 0 );
        }

        $( "#customer" ).autocomplete({
                source: "test.pl?term=",
                minLength: 2,
                select: function( event, ui ) {
                      log( ui.item ?
                              "Value: " + ui.item.value + " Key " + ui.item.id :
                              "Nothing selected, input was " + this.value );
                }
        });
});

我一直在google,但是没有找到任何可靠的东西,其中某人有一个带有JQuery的Perl示例。 test.js和index.cgi文件几乎完全复制了jquery-ui示例文件中用于jquery自动完成的代码,除了使用CGI.pm在Perl中编写index.cgi。

任何帮助都会受到赞赏,由于服务器及其上的应用程序的性质,我在这里的语言也有所限制。

2 个答案:

答案 0 :(得分:3)

Perl和jQuery大多是孤立的。如果Perl发送正确的HTML,您的浏览器应该执行正确的jQuery代码。如果在test.pl中你发送了正确的JSON - 如果你已经设置了jQuery来正确处理它 - 它应该正确处理。

但是,正如我在评论中所提到的,它必须先编译。您在$dbh作业结束时错过了分号。这意味着Perl认为您没有完成,并且期望您正在尝试以某种方式将$sth作业与$dbh作业联系起来。

完成更改后,您的代码就会编译完毕。要检查编译:{{1​​}}。但它失败了,因为我无法访问你要检查的数据库,所以假设连接字符串是正确的,我不明白为什么这不起作用。

始终,始终 - 至少在开发中 - 使用以下命令启动脚本:

perl -c test.pl

给自己一个抓住编码错误的机会。当然,在生产中,如果有一部分代码未能在预生产测试中测试,它们也会为您提供更好的错误消息。

答案 1 :(得分:0)

您没有在返回的json字符串中指定值或标签字段。您正在转储名称和ID。自动填充功能不知道您要在自动填充结果中显示哪一个。将客户名称分配给值字段。

$json->{"value"} = $customer[0];
$json->{"id"} = $customer[1];

jQuery自动完成需要使用json结果返回的“value”或“label”字段。如果您不包含它,jquery自动完成将不起作用:

自动完成功能的基本功能与分配给“标签”和“值”字段的查询结果一起使用。来自jQuery UI站点的'label'和'value'字段的说明:

“本地数据可以是一个简单的字符串数组,也可以包含数组中每个项目的对象,带有标签或值属性或两者。 label属性显示在建议菜单中。用户从菜单中选择了某些内容后,该值将插入到input元素中。如果仅指定了一个属性,则它将用于两者,例如。如果只提供value-properties,则该值也将用作标签。“

链接到完整示例: http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/