javascript - 如何在发布 jQuery 表单时不重新加载 ASP 页面？

Question

请耐心等待，我是个新手。

我想做什么？我正在尝试从输入中过滤类(class)列表。

我的环境是什么？我在用 ASP 编码的 CMS 中工作，但我无权访问服务器页面。我只能在页面的“模块”中插入一些代码并在 FTP 上上传文件。这些页面采用 XHTML 1.0 Transitional，对此我无能为力。

我的问题:此代码在本地和 FIDDLE 上有效但是当我将它插入沙箱时，它所做的只是重新加载页面。

这是我插入的 HTML

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/searchCatalog.js"></script>
<link rel="stylesheet" type="text/css" href="css/searchCatalog.css">
<form id="live-search" action="" class="styled" method="post">
<input type="text" class="search-field" id="filter" placeholder="What course are you looking for?" value="" />
<span id="filter-count"></span>
</form>
<ul class="courselist">
<li><a href="http://stackoverflow.com" target="_blank">English course 1</a></li>
<li><a href="http://stackoverflow.com" target="_blank">English course 2</a></li>
<li><a href="http://stackoverflow.com" target="_blank">Spanish course 1</a></li>
<li><a href="http://stackoverflow.com" target="_blank">Spanish course 2</a></li>
</ul>

这是我上传的JS

$(document).ready(function () {
    $('#filter').keypress(function (e) {
        if (e.which == 13) {
            // Hide the number of courses when nothing is entered in the search field
            if ($(this).val() == '') {
                $('#filter-count').hide();
            } else {
                $('#filter-count').show();
            }
            // Retrieve the input field text and reset the count to zero
            var filter = $(this).val(), count = 0;

            // Loop through the course list
            $(".courselist li").each(function () {

                // If the list item does not contain the text phrase fade it out
                if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                    $(this).fadeOut();

                    // Show the list item if the phrase matches and increase the count by 1
                } else {
                    $(this).show();
                    count++;
                }
            });
            e.preventDefault();
            // Update the count
            var numberItems = count;
            $("#filter-count").text("Number of courses related to your search : " + count);
        }
    });
});

非常感谢您的帮助。

Answer 1

将脚本src改为如下

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//malsup.github.io/jquery.blockUI.js"></script>