点击选项卡调用jQuery搜索

Calling jQuery search on tab click

本文关键字:jQuery 搜索 调用 选项      更新时间:2023-09-26

我有一个jQuery搜索脚本,它使用选项卡让用户定义他们想要使用的搜索类型。但是,当用户搜索某个内容,然后选择新的搜索类型(单击选项卡)时,他们必须转到文本框并按enter键再次提交查询。

我想在用户单击他们选择的选项卡时调用搜索,而不必重新提交查询我该怎么做?我希望你能理解我想描述的内容。

我当前的jQuery代码是:

$(document).ready(function(){
    $("[id^=t_]").click(function(){
        t=this.id.replace("t_","");
        $("[id^=t_]").removeClass("s");
        $("#t_"+t).addClass("s");
        return false
    });
    $("#t_search").click();
    $("form").submit(function(event){
        event.preventDefault();
        if($("#s").val().length>0){
            q=$("#s").val();
            $.ajax({
                type:"GET",
                url:""+t+".php?q="+q,
                dataType:"html",
                success:function(c){
                    $("#r").html(c);
                    $("#r").show()
                }
            });
        }
    });
});

我当前的HTML代码是:

<div id="n">
<a href="/" id="t_search" class="s">All</a>
<a href="/images" id="t_images">Images</a>
<a href="/videos" id="t_videos">Videos</a>
<a href="/news" id="t_news">News</a>
</div>
<form action="search" method="get">
<input type="text" id="s" name="q" maxlength="2048" autocomplete="off">
</form>
<div id="r"></div>

在选项卡更改时提交表单:

$("[id^=t_]").click(function(){
    t=this.id.replace("t_","");
    $("[id^=t_]").removeClass("s");
    $("#t_"+t).addClass("s");
    if ($("#s").val()!="") {  // only when there's a search term
        $("form").submit();
    }
    return false
});

试试这样的。。。

你已经完成了一半的任务。

$(document).ready(function(){
    $("[id^=t_]").click(function(){
        t=this.id.replace("t_","");
        $("[id^=t_]").removeClass("s");
        $("#t_"+t).addClass("s");
        q=$("#s").val();
        if($("#s").val().length>0){
            q=$("#s").val();
            $.ajax({
                type:"GET",
                url:""+t+".php?q="+q,
                dataType:"html",
                success:function(c){
                    $("#r").html(c);
                    $("#r").show()
                }
            });
        }
        return false
    });
});