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 and circle-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

searchIconVisible (default: true)

Type: Boolean

A boolean value to determine whether the search icon should be visible or not.

onClear (default: $.noop)

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.