php - 修复 jQuery 即时搜索脚本选项卡

Question

我有一个 Google Instant 风格的 jQuery 脚本，它使用 jQuery 选项卡脚本来定义用户想要的搜索类型。目前，无论您点击哪个选项卡链接，都只会查询 web.php?q=QUERY。为什么会这样？

<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>

Answer 1

您需要区分您的点击和键盘操作。您需要存储请求 url，然后在单击选项卡时更改它，还需要将 get 请求的 url 和数据分开。

所以你的js将是:

  $(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);
                }
            });
})
});