diff --git a/src/Console/Commands/Views/FilterBackpackCommand.php b/src/Console/Commands/Views/FilterBackpackCommand.php
index 6fe60c9..5fe576c 100644
--- a/src/Console/Commands/Views/FilterBackpackCommand.php
+++ b/src/Console/Commands/Views/FilterBackpackCommand.php
@@ -2,6 +2,8 @@
 
 namespace Backpack\Generators\Console\Commands\Views;
 
+use Illuminate\Support\Str;
+
 class FilterBackpackCommand extends PublishOrCreateViewBackpackCommand
 {
     /**
@@ -45,4 +47,19 @@ class FilterBackpackCommand extends PublishOrCreateViewBackpackCommand
      * @var string
      */
     protected $stub = 'filter.stub';
+
+    /**
+     * Build the class with the given name.
+     *
+     * @param  string  $name
+     * @return string
+     */
+    protected function buildClass($name)
+    {
+        $name = Str::of($name)->camel()->ucfirst()->value();
+        $stub = $this->files->get($this->getStub());
+        $stub = str_replace('__FILTER_NAME__', $name, $stub);
+
+        return $stub;
+    }
 }
diff --git a/src/Console/stubs/filter.stub b/src/Console/stubs/filter.stub
index 633cb93..133ea5d 100644
--- a/src/Console/stubs/filter.stub
+++ b/src/Console/stubs/filter.stub
@@ -1,64 +1,71 @@
-{{-- Simple Backpack CRUD filter --}}
 <li filter-name="{{ $filter->name }}"
     filter-type="{{ $filter->type }}"
     filter-key="{{ $filter->key }}"
+	filter-debounce="{{ $filter->options['debounce'] ?? 0 }}"
+	filter-init-function="{{ $filter->options['init_function'] ?? 'init__FILTER_NAME__Filter' }}"
 	class="nav-item {{ Request::get($filter->name)?'active':'' }}">
-    <a class="nav-link" href=""
-		parameter="{{ $filter->name }}"
-    	>{{ $filter->label }}</a>
+    <a class="nav-link" href="javascript:void(0);">{{ $filter->label }}</a>
   </li>
 
 
-{{-- ########################################### --}}
-{{-- Extra CSS and JS for this particular filter --}}
-
-{{-- FILTERS EXTRA JS --}}
-{{-- push things in the after_scripts section --}}
-
-@push('crud_list_scripts')
+@push('after_scripts')
+@bassetBlock('__FILTER_NAME__-filter.js')
     <script>
-		jQuery(document).ready(function($) {
-			$("li[filter-key={{ $filter->key }}] a").click(function(e) {
-				e.preventDefault();
+		// init function for simple filter
+		function init__FILTER_NAME__Filter(filter, filterNavbar) {
 
-				var parameter = $(this).attr('parameter');
+			let filterName = filter.getAttribute('filter-name');
+			let filterKey = filter.getAttribute('filter-key');
+			let filterAnchor = filter.querySelector('a');
+			let filterDebounce = filter.getAttribute('filter-debounce');
+			let shouldUpdateUrl = true;
 
-		    	// behaviour for ajax table
-				var ajax_table = $("#crudTable").DataTable();
-				var current_url = ajax_table.ajax.url();
+			// prevent duplicate event bindings when the filter view re-renders
+			if (filter.getAttribute('data-filter-initialized') === 'true') {
+				return;
+			}
+			filter.setAttribute('data-filter-initialized', 'true');
 
-				if (URI(current_url).hasQuery(parameter)) {
-					var new_url = URI(current_url).removeQuery(parameter, true);
-				} else {
-					var new_url = URI(current_url).addQuery(parameter, true);
-				}
+			filterAnchor.addEventListener('click', async function(e) {
+				e.preventDefault();
+				shouldUpdateUrl = true;
 
-				new_url = normalizeAmpersand(new_url.toString());
+				// get the filter value
+				let filterValue = filter.classList.contains('active') ? true : false;
 
-				// replace the datatables ajax url with new_url and reload it
-				ajax_table.ajax.url(new_url).load();
+				switch (filterValue) {
+					case true:
+						filterValue = null;
+						break;
+					default:
+						filterValue = true;
+				}
 
-				// add filter to URL
-				crud.updateUrl(new_url);
+				if (filterValue) {
+					filter.classList.add('active');
+				}else{
+					filter.dispatchEvent(new CustomEvent('backpack:filter:clear'));
+				} 
 
-				// mark this filter as active in the navbar-filters
-				if (URI(new_url).hasQuery('{{ $filter->name }}', true)) {
-					$("li[filter-key={{ $filter->key }}]").removeClass('active').addClass('active');
-                    $('#remove_filters_button').removeClass('invisible');
-				}
-				else
-				{
-					$("li[filter-key={{ $filter->key }}]").trigger("filter:clear");
-				}
-			});
+				document.dispatchEvent(new CustomEvent('backpack:filter:changed', {
+					detail: {
+						filterName: filterName,
+						filterValue: filterValue,
+						shouldUpdateUrl: shouldUpdateUrl,
+						debounce: filterDebounce,
+						componentId: filterNavbar.getAttribute('data-component-id'),
+					}
+				}));
+			});	
 
 			// clear filter event (used here and by the Remove all filters button)
-			$("li[filter-key={{ $filter->key }}]").on('filter:clear', function(e) {
-
-				$("li[filter-key={{ $filter->key }}]").removeClass('active');
+			filter.addEventListener('backpack:filter:clear', function(e) {
+				shouldUpdateUrl = !(e.detail && e.detail.clearAllFilters);
+				filter.classList.remove('active');
 			});
-		});
+		};			
 	</script>
+@endBassetBlock
 @endpush
 {{-- End of Extra CSS and JS --}}
 {{-- ########################################## --}}