jQuery Plugin For Enhancing The Standard Html Search Input - Search Input

jQuery Input Search is a fancy and user-friendly jQuery plugin that turns the standard html input field into HTML5 search input field. It displays a search icon within the input field by default, and displays a close button on input that allows to clear what you typed in.

Installation:

# Yarn
$ yarn add jquery-inputsearch

# NPM
$ npm install jquery-inputsearch --save

How to use it:

1. Include jQuery library and jQuery Input Search on the page

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.inputsearch.js"></script>

2. Create a standard html input field

<input type="text" id="input" placeholder="Search" />

3. Call the plugin on the input field and done.

$(function () {
  $('input').inputSearch();
});

4. Decide whether to show the search icon.

$(function () {
  $('input').inputSearch({
    searchIconVisible: true
  });
});

5. Trigger a function when the clear icon is clicked.

$(function () {
  $('input').inputSearch({
    onClear() {
      console.log('@onClear');
    },
  });
});

Change log:

v1.0.0 (2017-12-25)

• Update

v0.1.2 (2014-04-29)

• Code clean up / adapt icon visibility on display property change

---

This awesome jQuery plugin is developed by dwiyatci. For more Advanced Usages, please check the demo page or visit the official website.