Question

我的页面上有一个文本字段，其中包含一个自动填充功能，其中包含数据库中的项目。选择此选项后，使用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

DIMENSION

Answer 1

如果您更改$("#scroll").click(以定位提交按钮（类似$("#search-highlight input[type='submit'].click），则可以获得此行为。

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

.click(function(event)){以后您可以致电event.stopPropagation()，向浏览器表明您输入的点击事件已被处理（并且不会尝试将表单发回）。

Javascript表单操作

1 个答案: