Estoy intentando echar a andar este ejemplo de Tag-it.js
Uso los archivos externos que dice en el Ejemplo.
<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>
También los que dice la documentación de Tag-it.js
<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>
Mi código fuente está todo en un solo archivo .html, si alguien ya ha trabajo con Tag-it, o me ayude a encontrar el error y por qué no reacciona al input, escribo y no salen las etiquetas y mucho menos filtra la tabla.
Código fuente:
<!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>