jQuery Plugin To Create Smooth Animated Text Fields - Expandable Input

Expandable Input is a jQuery plugin helps you create smooth animated text fields (e.g. search input) that automatically expand towards right when focused or clicked on.

How to use it:

1.  Load the latest version of jQuery library and the jQuery expandable input plugin in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.expandable.js"></script>

2. Create an input field on your web page.

<input id="search" type="text" placeholder="Type something here..."></input>

3. Call the plugin on the search input you just created and set the target width you wish to extend to.

$("#search").expandable({
  width: 500,
});

4. Options and defaults.

$("#search").expandable({

// width, extended to
width: 150,

// duration of the animation
duration: 300,

// function triggered when you press enter. 
// receive input's value as a parameter.
action: function(val){
  alert(val);
}

});

---

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