Question

我正在尝试构建一个自动完成的jQuery输入。我有一个包含输入的表单，我希望自动完成功能与Yelp的API一起使用以自动完成餐馆名称。当我运行页面并在输入文本框中输入任何内容时，没有任何反应

这是我的代码：

<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>

Answer 1

我没有尝试过此代码，因为我没有Yelp帐户（因此没有auth令牌），但我立即在代码中看到了一些问题。首先，自动完成不是jQuery函数，而是jQuery-ui函数。你需要包含jQuery-ui javascript。

接下来，任何浏览器控制台应该引起您注意的代码错误很多。例如，警报（req）;在自动完成调用内部有几个原因是错误的...首先，您使用哈希参数调用自动完成，这是您设置属性的方式。因此，您不能将函数调用放在那里。查看定义散列的source属性的方式 - 格式为：attributeName：value

此外，即使该代码合法放置，req甚至还没有定义。

看起来你没有合适的匹配端括号，但我可能错了 - 在大括号内缩进代码永远不会伤害，所以你可以轻松地在视觉上排列匹配的大括号。

看起来你正在使用至少一个浏览器的开发工具（Firebug，webkit开发人员模式等）......至少那是我猜的，因为你在ajax中使用了console.log（）打回来。假设是这种情况，您的控制台应该告诉您代码中存在错误。

至于上面关于跨域Ajax的评论，它只是不正确...带回调的JSONP是一种绕过跨域限制的技术，至少在jQuery 1.4中受支持。所以，我认为你的问题不是代码的一部分。

祝你好运。

我的JS / jQuery代码有什么问题？

1 个答案: