1

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>

1 respuesta 1

1

Tag-it es un plugin para jQuery UI, eso quiere decir que debe incluirse en el proyecto después de jQuery y jQuery UI, pero lo estás importando al principio como el primer script. Tienes que moverlo justo después de onde importas jQuery UI.

Otro problema es que en la página de JSFiddle, se están incluyendo los estilos de jQuery UI (se hace automáticamente al seleccionar jQuery UI en la sección de JavaScript, lo cual puede ser algo confuso), que tú no estás incluyendo en tu código:

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

Ponlos y así el input se verá mejor con los bordes y todo.

Con esos dos cambios (mover tag-it.js después de jQuery UI, y agregar los estilos CSS de jQuery UI), el código ya funciona sin problemas:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="https://aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

  <script src="https://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="https://aehlke.github.io/tag-it/js/tag-it.js"></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;
      border:1px solid gray;
    }
    
    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>

Nota: he cambiado las fuentes de algunos ficheros a HTTPS para que funcionen sin problemas en el snippet. Y te recomendaría que cambiases a alguna versión más moderna de jQuery. La que utilizas ahora (1.5.2) es realmente antigua. Sería bueno que te plantearas otra más moderna (el JSFiddle usa la 1.9.1).

1
  • Muchas gracias!!! nunca me pasó por la mente el cambiar de posición el plug-in,.
    – Benny BuAc
    Commented el 3 ago. 2017 a las 5:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.