Question

我是一个完整的jQuery noob，需要创建一个使用jQuery Autocomplete的表单。我没有开始我的大项目，而是想继续并完成示例here，其中练习的目的是从MySQL表（本地机器到本机）中提取自动完成数据。我的JS和HTML代码是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- Here is the jQuery code -->
<script>
$(function() {

        $('#abbrev').val("");

        $("#state").autocomplete({
            source: "states.pl",
            minLength: 2,
            select: function(event, ui) {
                $('#state_id').val(ui.item.id);
                $('#abbrev').val(ui.item.abbrev);
            }
        });

    });
</script>

<!-- The HTML is simplistic for the example: -->
<form  method="post">
<fieldset>
<legend>jQuery UI Autocomplete Example - PHP Backend</legend>
<p>Start typing the name of a state or territory of the United States</p>
<p class="ui-widget"><label for="state">State (abbreviation in separate field): </label>
<input type="text" id="state"  name="state" /> <input readonly="readonly" type="text"   id="abbrev" name="abbrev" maxlength="2" size="2"/></p>
<input type="hidden" id="state_id" name="state_id" />
<p><input type="submit" name="submit" value="Submit" /></p>
</fieldset>
</form>
<script>
$("#autocompleteForm").submit(function(){
$("#submitted").html("State: " + $("#state").val() + "<br />State Abbreviation: " +      $("#abbrev").val() + "<br />State ID: " + $("#state_id").val());
return false;
});
</script>

我的Perl脚本是

#!/usr/local/bin/perl

# PERL MODULES WE WILL BE USING
use CGI;
use DBI;
use DBD::mysql;
use JSON;

# HTTP HEADER
print "Content-type: application/json; charset=iso-8859-1\n\n";

# CONFIG VARIABLES
my $platform = "mysql";
my $database = "us";
my $host = "localhost";
my $port = "3306";
my $tablename = "states";
my $user = "user";
my $pw = "pass";
my $cgi = CGI->new();
my $term = $cgi->param('term');

# DATA SOURCE NAME
$dsn = "dbi:mysql:$database:localhost:3306";
# PERL DBI CONNECT
$connect = DBI->connect($dsn, $user, $pw);

# PREPARE THE QUERY
$query_handle = $connect->prepare(qq{select id, trim(both char(13) from state) AS value,    abbrev FROM states where state like ?;});

# EXECUTE THE QUERY
$query_handle->execute('%'.$term.'%');

# LOOP THROUGH RESULTS
while ( my $row = $query_handle->fetchrow_hashref ){
    push @query_output, $row;
}
# CLOSE THE DATABASE CONNECTION
$connect->disconnect();

# JSON OUTPUT
print JSON::to_json(\@query_output);

我已经单独调用了Perl脚本，我得到了似乎正确格式化的结果（即状态和缩写列表）。但是，当我去运行示例时，我没有得到自动完成结果。我究竟做错了什么？ states.pl位于同一个文件夹中，所以我相信我的脚本是由HTML调用的，但我不知道它会给出jQuery所期望的响应。

Answer 1

我发布这个以防万一其他人像我一样沮丧。我终于发现解决方案是在perl脚本返回的散列引用中指定ID，因此以JSON格式传递给JS代码的实际上是一个字符串数组。

while ( my $row = $query_handle->fetchrow_hashref ){
    push @query_output, $row->{'id'};
}

与往常一样，调试永远不会令人满意。但是，我发现Chrome的调试工具非常有用。

Answer 2

如果自动完成功能不起作用，但perl脚本是独立运行的，那么可能是你的perl脚本没有被“source：'states.pl'”指令调用。

您是否尝试在浏览器中使用开发者插件来观察客户端和服务器之间的交换？使用chrome或firefox。

还有一句话：你正在加载jquery和jquery UI的第1版。您应该为jquery加载最新版本1.6.4，为jquery UI加载1.8.16。

RGDS

Answer 3

如果我正在调试它，我会将问题分成两部分

使用JS，尝试source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]检查前端是否正常工作。
然后切换到source: 'http://URL/states.pl' - 使用完整的URI并打开浏览器的调试模式（检查是否从服务器接收数据）

为什么我的jQuery自动完成代码失败？

3 个答案: