25+ jQuery Search Boxes - Free Code + Demos
Collection of 25+ jQuery Search Boxes. All items are 100% free and open-source.
1. Search Box - Icon To Bar
Author: Sabine Robart (_Sabine)
Links: Source Code / Demo
Created on: October 26, 2018
Made with: HTML, SCSS, JS
Tags: search, loading, animation, icon
2. Animated Search Form With Micro Interactions - JQuery Search Box
Applying some micro-interactions on a search form ui. Inspired By: https://www.uplabs.com/posts/search-away-microinteraction
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo, Www.uplabs.com
Created on: September 23, 2018
Made with: HTML, CSS, JS
Tags: search, form, search-button, micro-interactions, ui
3. Search Field Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 16, 2018
Made with: HTML, SCSS, JS
Tags: search, input, animation, field
4. CSS Search Input Animation
From Dribbble Shot
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: July 15, 2018
Made with: HTML, SCSS, JS
5. Skeuomorphic Search Input
Author: Jonas Badalic (JonasBadalic)
Links: Source Code / Demo, Dribbble.com
Created on: December 2, 2019
Made with: HTML, SCSS
6. Expanding Animated Search Box Using Jquery
Author: rajeshdn (cool_lazyboy)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, CSS, JS
7. Animated Search Box
animated search box using Html and Css and JQuery
Author: Chouaib Belagoun (elmanifico45)
Links: Source Code / Demo
Created on: July 31, 2017
Made with: HTML, CSS, JS
Tags: html, css, jquery, search
8. Animated Search Box
animated search box using Html and Css and JQuery
Author: Chouaib Belagoun (chouaibblgn45)
Links: Source Code / Demo
Created on: July 31, 2017
Made with: HTML, CSS, JS
Tags: html, css, jquery, search
9. JQuery Search Slide Out
A simple jQuery slide out search box that works with any base font-size
Author: James Thomas Almond (jamestalmond)
Links: Source Code / Demo
Created on: January 19, 2017
Made with: HTML, SCSS, JS
Tags: jquery, slide, responsive, font, search
10. Diagonal Menu With Search
Demo design project
Author: _j_ (Hoebink)
Links: Source Code / Demo
Created on: March 11, 2016
Made with: HTML, SCSS, JS
Tags: nav, navigation, menu, diagonal, search
11. Fancy Search Box // SVG + CSS + JQuery
Simple animations using CSS and stroke-dashoffset! Enjoy
Author: Tommy Small (tommysmall92)
Links: Source Code / Demo
Created on: August 24, 2018
Made with: HTML, CSS, JS
Tags: search, box, searchbox, svg, path
12. Bootstrap 4 JQuery Search Box
Author: Prince Sargbah (sargbah84)
Links: Source Code / Demo
Made with: HTML, CSS, JS
13. Search Bar Animation
Search input with morphing effect.
Author: Milan Milošev (MilanMilosev)
Links: Source Code / Demo
Created on: August 24, 2015
Made with: HTML, CSS, JS
Tags: input, search, bar, morphing
14. Expanding Search Box - Toggle Animated Search Box
Author: rajeshdn (RajRajeshDn)
Links: Source Code / Demo
Created on: December 4, 2017
Made with: HTML, CSS, JS
15. Orchestra- Serach Box
Prototyping a search form interaction for a project I'm working on.
Author: Aidan Zanders (catjuice)
Links: Source Code / Demo
Created on: June 17, 2016
Made with: HTML, SCSS, JS
Tags: input-focus, search-box, animate background image
16. Desktop Search Box - HTML5 - CSS3 - JS - JQuery
Search between two different sources using one input type text
Author: The National Archives (TNA-WEB-TEAM)
Links: Source Code / Demo
Created on: April 21, 2016
Made with: HTML, CSS, JS
Tags: search-box, mutiple sources
17. Prefixbox Instant Search Box Demo: Sverrirs.com
Author: Sverrir Sigmundarson (sverrirs)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
18. Zipline: Wikipedia Viewer With Autocomplete
Objective: Build a CodePen.io app that successfully reverse-engineers this: http://codepen.io/GeoffStorbeck/full/MwgQea. Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself. Rule #2: You may use whichever libraries or APIs you need. Rule #3: Reverse ...Read More
Author: Elise (elisecode247)
Links: Source Code / Demo
Created on: October 12, 2015
Made with: HTML, CSS, JS
Tags: zipline, search-box, wikipedia, free-code-camp, angularjs
19. Search Box
Author: Garvita (Garvita)
Links: Source Code / Demo
Created on: February 21, 2017
Made with: HTML, CSS, JS
Tags: search, animation, css, search-box
20. Mini-search Filter
A lightweight jquery search/filter for lists and items. Blog post and tutorial at http://www.robsawyer.me/blog/2013/07/10/lightweight-jquery-searchfilter-tutorial/
Author: Rob (robooneus)
Links: Source Code / Demo
Created on: July 9, 2013
Made with: HTML, CSS, JS
Tags: jquery, search, filter
21. Expanding Search Bar With JQuery
jQuery version of expanding search bar on codrops
Author: nikhil (nikhil)
Links: Source Code / Demo
Created on: January 24, 2014
Made with: HTML, CSS, JS
Tags: jquery, tutorial, search, searchbox, expanding
22. Responsive Search Box With Clear Button
A 100% wide search input with a clear button that always sits on the right.
Author: Pete Blatchford (555)
Links: Source Code / Demo
Created on: October 22, 2015
Made with: HTML, CSS, JS
Tags: search, searchbox, searchbar, clear, responsive
23. A Search-box With CSS3
see: http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Author: Jens Grochtdreis (jensgro)
Links: Source Code / Demo
Created on: October 24, 2013
Made with: HTML, CSS, JS
Tags: form, searchbox, css3
More Awesome Lists:
Share: