jQuery for ajax 검색 요청

Question

jQuery에 관해서는 다소 초보자입니다. 이해하기 위해 최선을 다하고 있습니다. 아래에는 귀하의 의견에 감사 드리며 두 가지 코드가 있습니다. 내 궁극적 인 목표는 무엇을 상자에 입력 할 것인지 묻는 것입니다. 두 가지 문제는 아래의 두 가지 코드로 각각 설명합니다.

function update_results(){ 
$.ajax({ 
    url: '{base}modules/search.php?q=' + $("#q").val(), 
    success: function(data) { 
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); }).keyup(); 
} 
}); 
} 

이 코드 조각

한 번 요청이 서버와 루프에 던져 크게 둔화 브라우저가 발생하지만, 완벽하게 작동한다 (문자 입력과 함께 유지).

function update_results(){ 
$.ajax({ 
    url: '{base}modules/search.php?q=' + $("#q").val(), 
    success: function(data) { 
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); }); 
} 
}); 
} 

이 코드 조각

은 루프 문제가되지 않습니다,하지만 난 내 search.php 페이지로 전송되는 쿼리를 입력 할 때마다 항상 마지막 2-3 문자가 없습니다. ?

<h3>Site Search</h3> 
    <input id="q" type="text" onkeyup="update_results()" value="Type in a search term..." onFocus="this.value='';" /><br> 
    <a href="javascript:clear_results();">(Reset)</a> | <a href="search/">(Advanced Search)</a> 
    <div id="results" style="text-align: left; font-size: 11px;"></div></center> 
    </div> 

내가 꿔 모든 #Q의 내용입니다 Q =을 search.php로 전송하고 그것을 위해 할 : 여기

는 위의 두 시나리오 중 하나가 트리거하는 HTML 요소이다 데이터를 반환하고 #results div에 배치하십시오. 나는 또한 어떤 종류의 타이머를 거기에두기를 원했기 때문에 사람이 임의의 시간 값으로 지정된 타이핑을 한 후에 또는 몇 초마다 한 번씩 문자가 입력 될 때마다 서버에 쿼리하지 않을 것이다. 일단 사람이 타이핑을 마치면 분명히 서버 망치질을 멈추고 싶습니다.

나는 인터넷을 둘러 보았고 조사를 해본 적이 없다면 사과드립니다. 반대로, 저는 어제 jQuery를 배우기 시작했습니다.

시간 내 주셔서 감사 드리며, 이것이 정말 초보자 용 질문 인 경우 사전에 사과드립니다.

Answer 1

항상 약간의 문자가 뒤섞인 이유는 아마도 이와 관련이 있습니다.

success: function(data) { 
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); }).keyup(); 
} 

AJAX 요청에서 더 많은 결과가 나올 때마다 이러한 "바인딩"동작이 늘어납니다. 따라서 키 업 동작이 해고 될 때마다 이러한 결과 집합이 모두 설정됩니다. 그것이 어떤 의미인지는 모르지만, 따라야 할 코드 중 가장 쉬운 부분은 아닙니다. 단지

success: function(data) { 
    $('#results').show().html(data); 
} 

이 더 잘 보인다면 , 당신의 fadeIn()과 지연 그것을 fancying 시도에이 부분을 변경

보십시오(). 당신이 (흐림)를 텍스트 필드를 떠날 때 결과를 숨길 수 있도록

$('#q').blur(function(){ $('#results').hide() }); 

이 그것을 만들 것입니다 :

당신은 아마 추가 할 수 있습니다 또 다른 한가지는이 같은 것입니다.