JS/jQuery 코드가 잘못 되었습니까?

자동 완성 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>

출처

2010-12-14 Ron

문제를 디버그하는 데 FireBug를 사용 해본 적이 있습니까? 응답을 위해 –

이 코드를 시도하지 않은 : 나는 페이지를 실행하고 입력 텍스트 상자에 아무 것도 입력 할 때, 아무것도 여기

내 코드 발생하지 따라서 Yelp 계정 (즉, 인증 토큰 없음)을 사용하지만 코드에서 몇 가지 문제점을 즉시 보게됩니다. 한 가지로, 자동 완성은 jQuery 함수가 아니라 jQuery-ui 함수입니다. jQuery-UI 자바 스크립트를 포함해야합니다.

다음으로 브라우저 콘솔에서주의해야 할 수많은 코드 오류가 있습니다. 예를 들어, 경고 (req); autocomplete 호출 내부에 몇 가지 이유로 잘못되었습니다 ... 한 가지, 당신은 속성을 설정하는 방법입니다 해시 매개 변수를 사용하여 자동 완성을 호출합니다. 따라서, 거기에 함수 호출을 넣을 수는 없습니다. 해시의 소스 속성이 정의 된 방식을 살펴 봅니다. attributeName : value

또한 코드가 정당한 경우에도 req는 아직 정의되지 않았습니다.

일치하는 끝 중괄호는 #과 같지 않지만 잘못 생각한 것 같습니다. 중괄호 안의 코드를 들여 쓰지 않아도되므로 중괄호를 시각적으로 쉽게 정렬 할 수 있습니다.

브라우저 개발 도구 (파이어 버그, 웹킷 개발자 모드 등) 중 적어도 하나를 사용하고있는 것처럼 보입니다. 적어도 당신이 사용하고있는 console.log() 이후로 추측하겠습니다. 아약스 콜백. 이 경우를 가정하면 콘솔에 코드에 오류가 있음을 알려야합니다.

크로스 도메인 Ajax에 대한 위의 설명에서와 같이 간단히 잘못되었습니다 ... 콜백이있는 JSONP는 도메인 간 제한 사항을 해결하는 기법으로 jQuery 1.4 이상에서 지원됩니다. 그래서, 나는 당신의 문제가 당신의 코드의 일부라고 생각하지 않는다.

행운을 비네.

출처

2010-12-14 09:15:39 btx

에 감사드립니다! 그것을 조심해라. 다시, 저는 웹 개발에 익숙하지 않습니다. FireBug가 페이지를 디버그하려고합니다. 당신은 내 책을 읽을 수있는 좋은 책/튜토리얼을 추천 해 줄 수 있습니까? – Ron

어디 보자. 우선, 파이어 버그 (Firebug)는 매우 중요하므로 설치하는 것이 중요합니다. 튜토리얼에 관해서 ... jQuery를 이해하는 데 중요한 부분은 CSS 선택기 구문을 이해하는 것이다. 그냥 http : //jquery.com의 자습서를 통해 큰 단계가되어야합니다. 자동 완성 기능을 계속 사용하려면 http://jquery-ui.com 튜토리얼을 볼 수도 있습니다 (각 위젯/컨트롤에는 각 위젯/컨트롤의 옵션/기능을 보여주는 몇 가지 예제가 있습니다). 코드는 일반적으로 쉽게 따라하기 쉽고, 예제는 간결하고 중요한 부분입니다. – btx

JS/jQuery 코드가 잘못 되었습니까?

답변

관련 문제