wow search form

What

A easy jQuery plugin to build dynamic search form.
Compatible with Bootstrap 3 style.

Why

Nice and Easy to use.

Demo

How install

Step 1

Download last release of WowSearchForm plugin.
Download jQuery framework required (WowSearchForm is tested with jQuery release 1.9.0 and 2.1.0)

Step 2

Include JS files into your html page:


				<!-- Before include jquery!!! -->
				<script type="text/javascript" src="jquery-2.1.0.min.js" charset="utf-8" ></script>

				<!-- include wow search form javascript -->
				<script type="text/javascript" src="../wowsearchform-min.js" charset="utf-8" ></script>

Include your custom CSS files or you can use Bootstrap style into your html page:


				<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

Step 3

Inside your html page write a simple form like this:


				<!--  Set class "wowsearchform" to start wowsearchform plugin -->
				<form id="myform" class="wowsearchform form-inline" action="test.php" method="post">

					<!--   It must be a SELECT of all fields to search (the class identify is "wowFields" and the name must be an array)  -->
					<select class="wowFields form-control" name="my_field[]">
						<!--  NB: the class name identify the field type (text, number, date) -->
						<option class="text" value="username">Name</option>
						<option class="number" value="age">Age</option>
						<option class="date" value="subscription">Subscription date</option>
					</select>

					<!--   It must be a INPUT TEXT (the name must be an array)  -->
					<input type="text" class="form-control" name="my_value[]">

					<!--  You can use class identify "wowNoClone" for others html element   -->
					<button type="submit" class="wowNoClone btn btn-primary"><i class="glyphicon glyphicon-search"></i> Search</button>
					<!--  wowsearchform reset button has the class identify "wowReset"   -->
					<a class="wowReset btn btn-default">Reset

					<!-- Example of others elements inside form -->
					<small style="padding-left:5em;">Clone this comment for each filter</small>
					<strong class="wowNoClone"> ...but not clone this!</strong>
				</form>

Step 4

You can install some plugins:

Datepicker field

Include plugin JS files into your html page (fork by jQueryUI):


					<!-- After included jquery!!! -->
					<!-script type="text/javascript" src="external/datepicker/js/datepicker-min.js" charset="utf-8" ><!-/script>
					<!-- include datepicker localized (download other languages from http://jqueryui.com/download/) -->
					<!-script type="text/javascript" src="external/datepicker/js/jquery.ui.datepicker-it.js" charset="utf-8" ><!-/script>

Include plugin CSS files into your html page:


					<link rel="stylesheet" type="text/css" href="external/datepicker/css/datepicker-min.css" />

..and enable this plugin from wowsearchform options

...for more information see this page source ;-)

License

WowSearchForm is open source software licensed under MIT

The plugins used by WowSearchForm are open source software... see each license

Wow Search Form