jQueryオートコンプリートコードが失敗するのはなぜですか？

Question

私は合計jQueryのnoobです.jQueryオートコンプリートを使用するフォームを作成する必要があります。私の大きなプロジェクトを開始するのではなく、例hereを完成させました。この練習のポイントは、あなたのオートコンプリートデータをMySQLテーブル（この場合は私のマシンにローカル）から引き出すことです。

<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スクリプトは（すなわちのリスト私は別に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); 

です：私のJSとHTMLコードがあります州および略語）。しかし、例を実行すると、オートコンプリートの結果は得られません。私は間違って何をしていますか？ states.plは同じフォルダにありますので、私のスクリプトはHTMLによって呼び出されていると思いますが、jQueryが期待しているレスポンスを提供しているかどうかはわかりません。

Answer 1

私は場合にこれを掲示しています誰にもほどイライラです私はそうだった。 JSON形式でJSコードに渡されるものが実際には文字列の配列になるように、解決策はperlスクリプトによって返されたハッシュ・リファレンス内にIDを指定することでした。

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

いつものように、デバッグは決して満足できません。しかし、私はChromeのデバッグツールが非常に有用であることを発見しました。

Answer 2

自動完了が機能しないが、perlスクリプトがスタンドアローンで動作している場合は、おそらくあなたのperlスクリプトが "source： 'states.pl'"指令によって呼び出されていないことでしょう。

ブラウザでdevelopperプラグインを使用して、クライアントとサーバーの間のやり取りを監視しようとしましたか？ chromeまたはfirefoxを使用してください。

さらに、jqueryとjquery UIのバージョン1を読み込んでいます。最後のバージョンはjqueryの場合は1.6.4、jqueryの場合は1.8.16をロードする必要があります。

RGDS

Answer 3

私はそれをデバッグしている場合、私はフロントエンドが動作していることを確認するためにsource: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]をしようと、JSを持つ2つの部分

1. に問題を分割したいです。
2. はその後source: 'http://URL/states.pl'に切り替える - 完全なURIを使用すると、ブラウザのデバッグモードをオンにする（データはサーバから受信しているかどうかをチェック）