Question

我正在努力让这个jsfiddle.net/7BUmG/5905/ Tag-it.js演示工作。

我正在使用Demo所说的外部资源。

<link href="http://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>

Tag-it.js documentation。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

但它似乎不起作用，输入没有显示标签，既没有过滤html表，也没有找到问题，如果有人使用Tag-it，或者有一个类似的例子，将帮助我使这项工作或能够找到错误将不胜感激。

感谢。

我的源代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">

  <script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  $( document ).ready(function() {
    myTags = $('#myTags');
myTags.tagit({
    afterTagAdded: function (evt, ui) {
        if (!ui.duringInitialization) {
            search();
        }
    },
    afterTagRemoved: function (evt, ui) {
        search();
    }
});
var search = function () {
    if ($('.tagit-label').length) {
        $("#table tbody tr").fadeOut();
        var toShow = [];
        $('.tagit-label').each(function () {
            filter = $(this).text();
            $("#table tbody tr").each(function () {
                if ($(this).text().search(new RegExp(filter, "i")) > 0) {
                    toShow.push($("#table tbody tr").index(this));
                }
            });
        });
        $(toShow).each(function(i,value){
            $("#table tbody tr").eq(value).fadeIn();
        });
    }else{
        $("#table tbody tr").fadeIn();
    }
}
});
  </script>
  <style type="text/css">
    body {
    padding: 20px;
}
input {
    margin-bottom: 5px;
    padding: 2px 3px;
    width: 209px;
}
td {
    padding: 4px;
    border: 1px #CCC solid;
    width: 100px;
}
  </style>
</head>
<body>
<input type = "text" id = "myTags">
<table class="table-striped" id="table">
    <thead>
        <th>Title 1</th>
        <th>Title 2</th>
        <th>Title 3</th>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>Green</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Grapes</td>
            <td>Green</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>Orange</td>
            <td>2</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Answer 1

问题是我把tag-it.js放在jquery之前。

<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

这解决了问题：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://aehlke.github.io/tag-it/js/tag-it.js"></script>

Tag-it.js无法过滤表格

1 个答案: