jquery-inputsearch.js
jQuery plugin for automagically transforming input[type="text"]
elements into input[type="search"]
-like elements.
I started to write this plugin back in 2013, contending other solutions to this issue in SO, right before I did some crazy CouchSurfing to Stockholm, Sweden.
Why?
There are a couple of highly upvoted answers in that thread (with some jQuery plugins written corresponds to them), but I was interested in writing my own because none of them uses jQuery UI icons.
Things have pretty much changed (annually) since then.
Now, the plugin is:
- lightweight (~4 KB),
- straight-forward; not requiring any CSS or images files to be included,
- minimalist and consistent because it uses Base64-encoded
search
andcircle-close (cross)
icons of jQuery UI.
Demo
You can see the plugin in action at JSFiddle.
Installation
Install jQuery InputSearch plugin via the command line with npm:
$ npm isntall jquery-inputsearch
Or simply by downloading it here.
Add the script to your page after adding jQuery:
<script src="//code.jquery.com/jquery-latest.js"></script> <script src="PATH/TO/jquery.inputsearch.js"></script>
Usage
Basic example
$('input').inputSearch();
Options
true
)
searchIconVisible (default: Type: Boolean
A boolean value to determine whether the search icon should be visible or not.
$.noop
)
onClear (default: Type: Function
An event callback handler when the clear icon is clicked.
$('input').inputSearch({ onClear() { // Life, Universe, and Everything console.log('number 42'); } });
Author
Glenn Dwiyatcita (@dwiyatci)
License
WTFPL – Do What the Fuck You Want to Public License.
See LICENSE.txt.