0

我的页面上有一个文本字段，其中包含数据库中的项目的自动完成功能。选中后，使用 jquery 将页面滚动到该结果在页面上的位置。我希望表单滚动到提交按钮上的结果，而不必再次单击文本字段。我将如何编辑我的代码以使其在提交时发生，而不是在文本字段单击时发生

表格代码 -

<form autocomplete="off">
<form name="search-highlight" id="search-highlight" method="post" action="#">
<p>
Film Name <label>:</label>
<input type="text" name="scroll" id="scroll" class="scroll"/>
                       <!--input type="button" value="Get Value" /-->
 </p>
<input type="submit" value="find" />
</form>

和 javascript

$("#scroll").autocomplete("get_film_list.php", {
    width: 260,
    matchContains: true,
    //mustMatch: true,
    //minChars: 0,
    //multiple: true,
    //highlight: false,
    //multipleSeparator: ",",
    selectFirst: false
});


$("#scroll").click(function(){  

    // start variables as empty  
    var scroll = "";  
    var n = "0";  

    // hide the results at first  
    $("p.results").hide().empty();  
    // grab the input value and store in variable  
    scroll = $('#scroll').attr('value');  
    console.log("The value of film is: "+scroll);  

    $('span.highlight').each(function(){  
        $(this).after($(this).html()).remove();  
    });  

    if($('#scroll').val() == ""){  
        $("p.results").fadeIn().append("Enter film in field above");  
        $('#scroll').fadeIn().addClass("error");  
        return false;  
    }else{  
       $('div.timeline :contains("'+scroll+'")').each(function(){ 
           $(this).html($(this).html().replace(new RegExp(scroll,'g'), '<span class="highlight">'+scroll+'</span>'));  
           $(this).find('span.highlight').fadeIn("slow"); 
           var offset = $(this).offset().top
           $('html,body').animate({scrollTop: offset}, 2000);
           return false;

        });  

        // how many did it find?  
        n = $("span.highlight").length;  
        console.log("There is a total of: "+n);  

        if(n == 0){  
            $("p.results").fadeIn().append("No results were returned");  
        }else{  
            $("p.results").fadeIn().append("<strong>Returned:</strong> "+n+" result(s) for: <em><strong>"+scroll+"</strong></em>.");  
        }  
        return false;  
    }  
});  
});

我希望你能理解我的问题——如果不是演示（未优化）www.ignitethatdesign.com/CheckFilm/index.php

方面

4

1 回答 1

0

如果您将 更改$("#scroll").click(为目标提交按钮（类似$("#search-highlight input[type='submit'].click）应该会得到您的行为。

您可能应该扩展单击回调的签名以包含事件参数，如

.click(function(event)){所以稍后您可以调用event.stopPropagation(), 向浏览器指示您输入的点击事件已被处理（并且它不会尝试将表单发回）。

于 2012-09-24T17:43:22.400 回答