Jquery在jsFiddle上运行正常但在localhost上运行不正常

时间:2015-05-18 09:43:45

标签: jquery html

我在jsfiddle上有一个代码可以正常工作 链接在这里 Jsfiidle code

但是当我尝试在我的机器上运行代码时,jquery无法运行..

  <html><head>
    <title></title>
    <style type="text/css">
    .custom-dropdown {
    position:relative;}

    .custom-dropdown .table-wrapper {
    max-height: 150px;
    overflow-y:auto;
    position:absolute;
    top:21px;
    border:1px solid #ccc;
    overflow-x:hidden;}
    .custom-dropdown .dropdown-table {
    width: 300px;}</style>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
$(function () {
    $('.dropdown-table').searchable({
        striped: true,
        searchType: 'fuzzy'
    });

    $(".dropdown-search").bind("keyup", function () {
        var $this = $(this);
        var $table = $this.next();
        if ($this.val().length > 0 && $table.is(":hidden")) {
            $table.show();
        } else {
            $table.hide();
        }

        var resultCount = ($table.find("tr:visible").length - 1);
        $table.find(".search-result-counter").html(resultCount + " records found.");
    });
});
    </script>
</head>
<body>
<div class="custom-dropdown">
    <input type="search" id="search" value="" class="dropdown-search" placeholder="Search">
    <div class="table-wrapper">
        <table class="dropdown-table">
            <thead>
                <tr>
                    <th colspan="4">
                        <span class="search-result-counter"></span>
                    </th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>Test</td>
                    <td>ccc</td>
                    <td>Some</td>
                    <td>More</td>
                    <td>

                    </td>
               </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

这个程序适用于jsfiddle但是当我在我的计算机上运行时,jquery没有任何效果 请帮忙

1 个答案:

答案 0 :(得分:0)

尝试以下代码。以下是我在代码中发现的错误

  • 缺少可搜索的插件
  • Jquery版本是非常旧的/不同版本的jquery库包含

    删除其他jquery库包含并添加以下代码


    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>