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	<div class="row">
8	8	<div class="col-sm-9"><i class="fa fa-list"></i>
9	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	11	</div>
12	12	</div>
13	13	<div class="widget-content">
...	...	@@ -48,3 +48,31 @@
48	48	</ul>
49	49	</div>
50	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 %}
...	...