0
私はこれを取得しようとしていますjsfiddle.net/7BUmG/5905/ Tag-it.jsデモが動作するようにしています。Tag-it.jsはテーブルをフィルタリングするためには機能しません
私はデモで言う外部ソースを使用しています。
<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>
タグ-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テーブルをフィルタリングしない、タグが表示されない、誰もがタグ-それで働いていた、または持っている場合、私は、問題を見つけることができませんこのような例は、私がこの作業を手助けするか、エラーを見つけるのに役立ちます。
ありがとうございました。
私のソースコード：
<!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>