Что не так с моим кодом JS / jQuery? - PullRequest
0 голосов
/ 14 декабря 2010

Я пытаюсь создать автозаполнение ввода jQuery.У меня есть форма, содержащая входные данные, и я хочу, чтобы автозаполнение работало с API Yelp для автозаполнения названий ресторанов.когда я запускаю страницу и набираю что-нибудь в поле ввода, ничего не происходит

вот мой код:

<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 Ответ

0 голосов
/ 14 декабря 2010

Я не пробовал этот код, так как у меня нет учетной записи Yelp (следовательно, нет авторизационных токенов), но я сразу вижу несколько проблем в вашем коде. С одной стороны, автозаполнение - это не функция jQuery, а функция jQuery-ui. Вам нужно будет включить jQuery-ui javascript.

Далее, существует множество ошибок в коде, на которые должна была обратить внимание любая консоль браузера. Например, оповещение (req); внутри вызова автозаполнения неправильно по нескольким причинам ... во-первых, вы вызываете автозаполнение с параметром хеша, который является способом, которым вы устанавливаете свойства. Следовательно, вы не можете помещать вызовы функций таким образом. Посмотрите, как определяется исходное свойство хеша в форме: attributeName: value

Кроме того, даже если этот код был разрешен для размещения там, req еще не был определен.

Похоже, что у вас нет подходящих # соответствующих конечных скобок, но я могу ошибаться - это никогда не повредит коду отступа в фигурных скобках, так что вы можете легко выстроить соответствующие фигурные скобки визуально.

Похоже, вы используете по крайней мере один из инструментов разработки браузеров (Firebug, режим разработчика webkit и т. Д.) ... по крайней мере, это то, что я предполагаю, так как вы использовали console.log () в вашем ajax Перезвоните. Предполагая, что это так, ваша консоль должна сообщить вам, что в вашем коде есть ошибки.

Что касается приведенного выше комментария о междоменном Ajax, он просто некорректен ... JSONP с обратным вызовом - это метод, который обходит междоменные ограничения и поддерживается по крайней мере в jQuery 1.4. Так что я не думаю, что ваша проблема в той части вашего кода.

Удачи.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...