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

您需要区分点击次数和点击次数。您需要存储您的请求网址，然后在点击标签时进行更改，您还需要将您的网址和数据分开以获取请求。

所以你的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);
                }
            });
})
});

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

1 个答案: