Fixing jQuery instant search script tabs

I have开发者_如何学Go a Google Instant style jQuery script which uses a jQuery tab script to define what search type the user wants. Currently, no matter what tab link you click on it will only query web.php?q=QUERY. Why could this be?

<script type="text/javascript">
$(document).ready(function(){
    $("#query").keyup(function(){
            var query=$(this).val();
            var type=$("a").attr("id");
            var yt_url=''+type+'.php?q='+query;
            window.location.hash=''+type+'/'+query+'/';
            $.ajax({
                type:"GET",
                url:yt_url,
                dataType:"html",
                success:function(results){
                   $('#results').html(results);
                }
            });
    });
});
</script>

<ul>
<li><a href='javascript:void(null);' id="web">Web</a></li>
<li><a href='javascript:void(null);' id="images">Images</a></li>
<li><a href='javascript:void(null);' id="videos">Videos</a></li>
<li><a href='javascript:void(null);' id="news">News</a></li>
<li><a href='javascript:void(null);' id="social">Social</a></li>
</ul>

<input type='text' id='query'>
<div id="results"></div>

You need to differentiate your clicks from your keyup. You need to store your request url and then change it when tabs are clicked, you also need to seperate your url and data for a get request.

So your js would be:

  $(document).ready(function(){
    $("#query").keyup(function(){
            var query=$(this).val();
            var type='web' //substitute text, default whatever
            var yt_url=type+'.html';
            alert(yt_url);
            window.location.hash=''+type+'/'+query+'/';
            $.ajax({
                type:"GET",
                url:yt_url,
                data: type+"="+query,
                error: function(a,b,c,d)
                {
                    $("#results").html("A:"+a+"B: "+b+" C "+c);
                },
                dataType:"html",
                success:function(results){
                   console.log("Result"+results);
                }
            });
    });

$("a").click(function() {
 var query=$("#query").val();
            var type=$(this).attr('id');
            var yt_url=type+'.html';

            window.location.hash=''+type+'/'+query+'/';
$.ajax({
                type:"GET",
                url:yt_url,
                data: type+"="+query,
                error: function(a,b,c,d)
                {
                    console.log("A:"+a+"B: "+b+" C "+c);
                },
                dataType:"html",
                success:function(results){
                   console.log("Result"+results);
                }
            });
})
});