Skip to content

🔎 jQuery plugin for transforming <input type="text"> elements into <input type="search"> 🌀like elements

License

Notifications You must be signed in to change notification settings

dwiyatci/jquery-inputsearch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery-inputsearch.js

version downloads WTFPL License

jQuery plugin for automagically transforming input[type="text"] elements into input[type="search"]-like elements.

jQuery InputSearch screenshot

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. :bowtie:

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.

WTFPL

About

🔎 jQuery plugin for transforming <input type="text"> elements into <input type="search"> 🌀like elements

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published