Collection of free jQuery search box code examples. Update of November 2019 collection. 6 new items.

Related Articles:

  1. CSS Search Boxes
  2. Bootstrap Search Boxes

Author

  • Hamed

Links

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Short Code

Links

Made with

  • HTML / CSS / JS

About a code

jQuery Search Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • rajeshdn

Links

Made with

  • HTML / CSS / JS

About a code

Dropdown Search Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Atul Prajapati

Links

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Sabine Robart

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Box - Icon to Bar

Expanding circle to show form input. Loading animation on click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, bootstrap.css, bootstrap.js, aos.js

Author

  • Himalaya Singh

Links

Made with

  • HTML / CSS / JS

About a code

Animated Search Form with Micro Interactions

Applying some micro-interactions on a search form UI.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Field Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tommy Small

Links

Made with

  • HTML / CSS / JS

About a code

Fancy Search Box

Simple animations using CSS and stroke-dashoffset.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Aaron Iker

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Input Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • 0guzhan

Links

Made with

  • HTML / CSS / JS

About a code

Search Input

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.js

Author

  • rajeshdn

Links

Made with

  • HTML / CSS / JS

About a code

Search Box

Expanding animated search box using jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Chouaib Blgn

Links

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Animated search box using HTML, CSS and jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Alex Tkachev

Links

Made with

  • HTML / CSS / JS

About a code

Animated Search Box

Animated search box in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • James Thomas Almond

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Search Slide Out

A simple jQuery slide out search box that works with any base font-size.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • uros

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Apple Menu Search Animation

Apple website menu search animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, animate.css

Author

  • _j_

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Diagonal Menu With Search

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kristy Yeaton

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Search Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -