タブ付きjQueryの検索結果

Question

私は、GoogleのインスタントスタイルのjQuery検索スクリプトを使用してPHPファイルをクエリし、その結果を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()中）AJAX呼び出しのためのコードを分離できそれを$('input').keyup()と$('#nav a').click()の両方にバインドします。