permite buscar los usuarios del sistema a traves de mark.js

Wilmer
1 parent 09c2dca20d
Showing 1 changed file with 29 additions and 1 deletions Show diff stats
app/Resources/views/usuarios/index.html.twig
@@ -7,7 +7,7 @@
                 <div class="row">                
                 <div class="col-sm-9"><i class="fa fa-list"></i>
                     <h3>Listado de usuarios Registrados</h3></div>
-                    <div class="col-sm-2"><input type="text" class="form-control"></div>
+                    <div class="col-sm-2"><input type="text" name="marca" class="form-control"></div>
               </div>
             </div>
          <div class="widget-content">
@@ -48,3 +48,31 @@
     </ul>
             </div>
 {% endblock %}
+
+
+       {% block javascripts %}
+           {{ parent() }}
+           <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
+
+           <script>
+               $(function() {
+
+                   var $input = $("input[name='marca']"),
+                       $context = $("table tbody tr");
+                   $input.on("input", function() {
+                       var term = $(this).val();
+                       $context.show().unmark();
+                       if (term) {
+                           $context.mark(term, {
+                               done: function() {
+                                   $context.not(":has(mark)").hide();
+                               }
+                           });
+                       }
+                   });
+
+               });
+
+           </script>
+
+       {% endblock %}
	@@ -7,7 +7,7 @@		@@ -7,7 +7,7 @@
7	<div class="row">	7	<div class="row">
8	<div class="col-sm-9"><i class="fa fa-list"></i>	8	<div class="col-sm-9"><i class="fa fa-list"></i>
9	<h3>Listado de usuarios Registrados</h3></div>	9	<h3>Listado de usuarios Registrados</h3></div>
10	- <div class="col-sm-2"><input type="text" class="form-control"></div>	10	+ <div class="col-sm-2"><input type="text" name="marca" class="form-control"></div>
11	</div>	11	</div>
12	</div>	12	</div>
13	<div class="widget-content">	13	<div class="widget-content">
	@@ -48,3 +48,31 @@		@@ -48,3 +48,31 @@
48	</ul>	48	</ul>
49	</div>	49	</div>
50	{% endblock %}	50	{% endblock %}
		51	+
		52	+
		53	+ {% block javascripts %}
		54	+ {{ parent() }}
		55	+ <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script>
		56	+
		57	+ <script>
		58	+ $(function() {
		59	+
		60	+ var $input = $("input[name='marca']"),
		61	+ $context = $("table tbody tr");
		62	+ $input.on("input", function() {
		63	+ var term = $(this).val();
		64	+ $context.show().unmark();
		65	+ if (term) {
		66	+ $context.mark(term, {
		67	+ done: function() {
		68	+ $context.not(":has(mark)").hide();
		69	+ }
		70	+ });
		71	+ }
		72	+ });
		73	+
		74	+ });
		75	+
		76	+ </script>
		77	+
		78	+ {% endblock %}