탭이있는 jQuery 검색 결과

Question

PHP 인스턴트 스타일의 jQuery 검색 스크립트를 사용하여 결과를 HTML div로 구문 분석합니다. 사용자가 사용할 검색 유형을 정의하기 위해 탭을 사용합니다. 사용자가 검색하면 # 유형/검색어 /과 같은 URL이 만들어집니다.

내 문제는 사용자가 무언가를 검색 한 다음 새 검색 유형 (탭 클릭)을 선택하면 텍스트 상자로 이동하여 Enter 키를 눌러 쿼리를 다시 제출해야한다는 것입니다. 검색이 활성화되어 있고 결과를 바로로드하는 탭을 클릭했을 때 어떻게 만들 수 있습니까?

내가 설명하려고하는 것을 이해할 수 있기를 바랍니다. JSfiddle : http://jsfiddle.net/phWSR/

나의 현재 jQuery 코드는 다음과 같습니다

$(document).ready(function() { 
    $('[id^=type_]').click(function() { 
     type = this.id.replace('type_', ''); 
     $('[id^=type_]').removeClass('selected'); 
     $('#type_' + type).addClass('selected'); 
    }); 
    $('#type_search').click(); 
    $('input').keyup(function() { 
     query = $(this).val(); 
     url = '/' + type + '/' + query + '/'; 
     window.location.hash = '' + type + '/' + query + '/'; 
     document.title = $(this).val() + ' - My Search Script'; 
     $('#results').show(); 
     if (query == '') { 
      window.location.hash = ''; 
      document.title = 'My Search Script'; 
      $('#results').hide(); 
     } 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function (results) { 
       $('#results').html(results); 
      } 
     }); 
    }); 
}); 

나의 현재 HTML 코드는 다음과 같습니다

<div id='nav'> 
<a id='type_search'>All</a> 
<a id='type_images'>Images</a> 
<a id='type_videos'>Videos</a> 
<a id='type_news'>News</a> 
<a id='type_social'>Social</a> 
</div> 
<input type='text' autocomplete='off'> 

<div id='results'></div> 

Answer 1

은 별도의 (현재 $('input').keyup())에 아약스 호출에 대한 코드를 분리 할 수 함수를 만들고 $('input').keyup() 및 $('#nav a').click()에 바인딩합니다.