Plugin Filter Fss - Full Stack Colombia

Documentación
Descargar

Plugin Filter Fss

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...


Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario.

El trozo de texto estándar de Lorem Ipsum usado desde el año 1500 es reproducido debajo para aquellos interesados.

Es un hecho establecido hace demasiado tiempo que un lector. Si vas a utilizar un pasaje de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.

Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio.

<!-- 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>