2010-12-14 10 views
0

私はオートコンプリートjQuery入力を作成しようとしています。私は入力を含むフォームを持っており、オートコンプリートをYelpのAPIで動作させてレストラン名を自動完成させたい。私は、ページを実行し、入力されたテキストボックスに何かを入力すると、何もここJS/jQueryコードで何が問題になりますか?

を起こらない私のコードです:

<html> 
<body> 
<input id="restaurantSearch" /> 

<pre> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script> 
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script> 
<script type="text/javascript" src="https://github.com/jamespadolsey/prettyPrint.js/raw/master/prettyprint.js"></script> 

<script> 
$(document.ready(function() { 
    $('#restaurantSearch').autocomplete({ 
    alert(req); 
     source: function(req, add){ 



    var auth = { 
    // 
    // Update with your auth tokens 
    // 
    consumerKey: "xxx", 
    consumerSecret: "xxx", 
    accessToken: "xxx-xxx", 
    accessTokenSecret: "xxx", 
    serviceProvider: { 
    signatureMethod: "HMAC-SHA1" 
    } 
}; 

var terms = req; 
var near = 'San+Francisco'; 

var accessor = { 
    consumerSecret: auth.consumerSecret, 
    tokenSecret: auth.accessTokenSecret 
}; 

parameters = []; 
parameters.push(['term', terms]); 
parameters.push(['location', near]); 
parameters.push(['callback', 'cb']); 
parameters.push(['oauth_consumer_key', auth.consumerKey]); 
parameters.push(['oauth_consumer_secret', auth.consumerSecret]); 
parameters.push(['oauth_token', auth.accessToken]); 
parameters.push(['oauth_signature_method', 'HMAC-SHA1']); 

var message = { 
    'action': 'http://api.yelp.com/v2/search', 
    'method': 'GET', 
    'parameters': parameters 
}; 

OAuth.setTimestampAndNonce(message); 
OAuth.SignatureMethod.sign(message, accessor); 

var parameterMap = OAuth.getParameterMap(message.parameters); 
console.log(parameterMap); 

$.ajax({ 
    'url': message.action, 
    'data': parameterMap, 
    'dataType': 'jsonp', 
    'jsonpCallback': 'cb', 
    'success': function(data, textStats, XMLHttpRequest) { 
    console.log(data); 
    var output = prettyPrint(data); 
    $("body").append(output); 
    } 
}); 

}); 
</script> 
</body> 
</html> 

+1

問題のデバッグにFireBugを使用してみましたか?応答のために –

答えて

0

私が持っていないので、私は、このコードを試していませんYelpアカウント(つまり、認証トークンはありません)がありますが、私はすぐにあなたのコードにいくつかの問題を見ます。 1つは、オートコンプリートはjQuery関数ではなく、むしろjQuery-ui関数です。 jQuery-uiのjavascriptを含める必要があります。

次に、ブラウザのコンソールに注意する必要があるコードエラーが多数あります。たとえば、アラート(req)。オートコンプリートコールの内部はいくつかの理由から間違っています...一つは、プロパティを設定する方法であるハッシュパラメータでオートコンプリートを呼び出しています。したがって、そこに関数呼び出しを入れることはできません。属性名:値

また、そのコードがそこに置くことが合法であったとしても、reqはまだ定義されていませんでした。

あなたは適切なマッチの最後の括弧がないようですが、私は間違っているかもしれません。マッチする括弧を視覚的に簡単に並べることができるように、括弧内のインデントコードを痛めることはありません。

ブラウザの開発ツール(Firebug、Webkit開発者モードなど)のうちの少なくとも1つを使用しているようです。少なくとも、あなたのconsole.log()を使用してから推測していることですajaxコールバック。これが当てはまると仮定すると、コンソールにコードにエラーがあると伝える必要があります。

クロスドメインAjaxについての上記のコメントは、単に間違っています...コールバック付きのJSONPは、ドメイン間の制限を回避する技術であり、少なくともjQuery 1.4ではサポートされています。だから、あなたの問題はあなたのコードの一部だとは思わない。

幸運。

+0

ありがとう!確かめます。もう一度、私はWeb開発の初心者です。 FireBugをインストールして、ページをデバッグしようとしました。あなたは、Windows開発から来て、そこに私の技術をそこに実行する良い本/チュートリアルをお勧めできますか? – Ron

+0

見てみましょう。まず第一に、Firebugは非常に重要なので、あなたがインストールされていることを確認してください。チュートリアルでは、jQueryを理解する上で重要な部分は、CSSセレクタ構文を理解することです。ちょうどhttp://jquery.comのチュートリアルを見ていくことは大きなステップになるはずです。そのオートコンプリートを機能させたい場合は、http://jquery-ui.comチュートリアルもご覧ください(それぞれのウィジェット/コントロールには、各ウィジェット/コントロールのオプション/機能の多くを示すいくつかの例があります)。簡単に従うことが簡単で、例は簡潔で重要な点です。 – btx

関連する問題