Switchless TEST

List page Filters

  • keywords: #pattern,
  • author: #alex

This is implemented as a section on the left side on a laptop screen.


Micro interactions on button click

Sample code

<div class='ui grid'>
	<div class='four wide column'>
		<form class="ui form segment" action="" method='get'>
			<div class="field">
				<div class="ui fluid filter_txn scrolling dropdown basic button">
					<input type="hidden" name="gstin" value='<%=req.query.gstin?req.query.gstin:''%>'>
					<i class="dropdown icon"></i>
					<div class="text">All</div>
					<div class="menu transition hidden" tabindex="-1">
						<!-- <div class="item active selected" data-value='all'>All</div> -->
							<div class="item" data-value='<%=a.value %>'><%=a.value%> - <%= a.business_name%></div>
			<div class="ui buttons">
			<div class='ui orange left aligned button' id='submit_form'>Apply filter</div>
			<div class='ui blue right aligned button' id='reset_form'>Reset</div>
	<div class='twelve wide column'>
// set up the form
	fields: {

	console.log('clicked on form submit');
	$('input').each(function(i) {
		var $input = $(this);
		if ($input.val() == '')
			$input.attr('disabled', 'disabled');
	$( "form" ).submit();
	window.location = window.location.pathname;