Whats wrong with my JS / jQuery code?
I'm trying to build an autocomplete jQuery input. I have a form that contains an input, and I want the autocomplete to work with Yelp's API to autocomplete restaurant names. when I run the page and type anything into the input textbox, nothing happens
here is my code:
<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']);
v开发者_Go百科ar 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>
'
I haven't tried this code, since I don't have a Yelp account (thus no auth tokens), but I immediately see a few problems in your code. For one thing, autocomplete isn't a jQuery function, but rather a jQuery-ui function. You'll need to include the jQuery-ui javascript.
Next, there's numerous code errors that any browser console should have brought to your attention. For example, the alert(req); inside the autocomplete call is wrong for a couple reasons... for one thing, you are calling autocomplete with a hash parameter, which is the way you set properties. Therefore, you can't put function calls in there like that. Look at the way the source property of the hash is defined - in the form: attributeName : value
Also, even if that code were legal to place there, req hadn't even been defined yet.
It seems like you don't have a proper # of matching end braces, but I might be wrong about that - it never hurts to indent code within braces so you can easily line up matching braces visually.
It looks like you're using at least one of the browsers' development tools (Firebug, webkit developer mode, etc)... at least that's what I'm guessing since you used console.log() in your ajax callback. Assuming this is the case, your console should tell you that there's errors in your code.
As for the above comment about cross-domain Ajax, it's simply incorrect... JSONP with a callback is a technique that gets around cross-domain restrictions, and is supported in at least jQuery 1.4. So, I don't think your problem is that part of your code.
Good luck.
加载中,请稍侯......
精彩评论