Plugin Filter Fss - Full Stack Colombia

Import Plugin

Para importar el plugin se debe incluir el fichero js del plugin a través de la etiqueta<script>.

Debe incluir el plugin al final de la etiqueta <body>.
<body>
  ...
  <script type="text/javascript" src="https://fullstackcolombia.com/lib/plugins/filter/jquery.filter_fss.js"></script>
</body>

Html

Para el correcto funcionamiento del plugin se debe crear una campo de texto <input>, el segundo paso es crear un contenedor de los elementos a filtrar, para esto se puede usar una etiqueta <div> y dentro de esta incluimos los elementos que contienen el contenido a filtrar, puieden ser etiquetas de párrafo <p>, o etiquetas de lista <li>, o pueden ser otras etiquetas como pueden ser <div>, <span>, etc...


<!-- Simple -->
<div class="input-group">
  <input id="filterfss"  type="text" class="form-control" placeholder="Text">
  <span class="input-group-addon"><i class="fa fa-filter"></i></span>
</div>
<div class="box-search">
  <p>...</p>
  <p>...</p>
  <p>...</p>
  ...
</div>

JavaScript

Código JavaScript de uso simple.
<script>
  $(document).ready(function (e) {
    $("#filterfss").filter_fss({container: '.box-search'});// Simple
  });
</script>
Todos las opciones por defecto.
<script>
  $(document).ready(function (e) {// Default Options
    $(".filterfss").filter_fss({
       container: 'body',        //Selector del elemento que es contenedor de todos los items a filtrar.
       items: 'p',               //Selector de los elementos a seccionar en el filtrar
       isParent: '',             //Indica el selector padre es de esta clase o tipo y sus hijos son los que se incluyen el el filtrar.
       includeParent: false,     //Indica que el selector padre de los items que se van a filtrar tambien se incluye en el filtro.
       classIncludeParent: '',   //Clase del selector padre que se incluye en el filtro.
       display: 'block'          //Estilo CSS de los elementos que se desean visualizar en el filtro.
    });
  });
</script>