Important Notice: Anyone who tried to download the Notification Bubbles PSD yesterday will have noticed it was empty. It's been fixed now!
The Finished Box

Digital Resource Magazine

Subscribe
Options
About tfbox
Share

jQuery Smooth Animated Search Field Freebie

Loading...
39
51884
jQuery Smooth Animated Search Field Freebie

Want a cool search box? Look no further. Improve your search by trying this animated apple style search box. PSD also included.

Love it? 74
18844 Downloads

If you had an eagle eye you would have noticed earlier I posted a snippet of code which altered the default values for inputs on focus/blur. I removed this post and decided just to create a nifty little search for you. The search was inspired by apple.com and it works in all major browsers, even works in IE6 though you would have to fix the png yourself.

Requirements

For the more advanced usage of the search it requires either jquery.color or jquery UI for the colour fading animation, this isn’t necessary for the plugin to work, it just adds a nice effect – remove if deemed unnecessary.

PSD Included in download.

You can easily check out our high quality 1Y0-A15 which prepare you well for the real 70-648 dumps exam.You can also get success in real exam E20-591 with the quality 646-985 dumps and OG0-093.

Connect to the author

I am the founder of The Finished Box, a Digital Resource Magazine. Founded in October 2010 and launched in February 2011 my focus is to bring you articles, inspiration, freebies and more focusing on quality more than quantity.

  • http://www.phpprogramator.info/2011/05/jquery-smooth-animated-search-field-freebie/ jQuery Smooth Animated Search Field Freebie | PHPprogramátor.info

    [...] Čítať ďalej originálny článok [...]

  • Anonymous

    Good looking but I see it needs an internet connection for some google Ajax calls.
    Extreme Java

  • Anonymous

    Hey thanks for the comment.

    I was under the assumption that people who download this had an internet connection anyway. If you wish to use it offline simply download it here. Cheers

  • http://twitter.com/proxdeveloper Pablo Fierro

    Great resource, it haves same feeling as the apple.com search input.
    I’m planning on using it on a project of mine, thanks!

  • Anonymous

    No problem and thanks! Let me know how it goes :)

  • Alex

    amazing!

  • Anonymous

    Thanks buddy, appreciate it!

  • http://jeremypenrod.com Jeremy Penrod

    ******Fix for IE******
    Clicking the magnifying glass icon collapses the search box. It also fails to submit in IE unless you hit Enter on the keyboard. (In mozilla/webkit it DOES submit the form just before beginning the collapse animation.) In my opinion, the textbox shouldn’t collapse upon clicking the submit button/magnifying glass.

    The workaround I’m using is to wrap the ‘blur’ event in a conditional statement, so that while it contains text, blur won’t trigger the collapse (and remove the magnifying-glass’s submit capabilities in IE).

    The code:

    }).bind(‘blur’, function() {
    if(input.val() === ”) { /* <– this is the conditional you add */
    jQuery(this).animate({color: '#b4bdc4'}, 300); // text color
    jQuery(this).parent().animate({
    …etc…
    } else {
    submit.css({display: 'none'});
    }
    } /* <– End conditional statement added */
    }).keyup(function() {
    …etc…

  • Anonymous

    Hey thanks for letting me know about this, I should have debugged it a little more prior to releasing it.

    I’ll get it fixed as soon as I get the time, thanks once again!

  • http://jeremypenrod.com Jeremy Penrod

    Sure thing. Love the search box, by the way. I’m looking forward to some great resources from The Finished Box.

  • http://www.designchomp.com/ Anatoli

    The search doesn’t work on http://designchomp.netsons.org/.. :( Can you give me the wordpress code or something that works?

  • Jalbertoleyva

    How using this code for my website, in the top?

  • http://sanbd.com Selim Rana

    no need any javascript easy way by css3 for modern browser

    input {
    -webkit-transition: weight 350ms ease;
    -moz-transition: weight 350ms ease;
    -o-transition: weight 350ms ease;
    transition: weight 350ms ease;
    width: 120px;
    }
    input:focus {
    width: 120px;
    }

  • Ultrawazer

    where do i place the url of my website ? because when i hit search it doesnt filter nothing, so i guess i need to edit something to place my website url right ?

  • Ounough Mourad

    hello all please i need to custumise the search for my locale disque search guide.pdf

    any help please

    many thanks in advance

    br

  • http://www.facebook.com/kuhashmi Kaleem Ullah Hashmi

    can we get complete file with IE code?. I am not expert in java code.
    I need file compatible with IE, firefix, chrome etc…
    How can i get that file..

  • http://jd-software.blogspot.com/ Iam Eloktavian

    Hey this is very cool.
    I just create new php website, and i seems need searchbox for content.

    Good Post!
    I’ll download and using it .

    Thank you!

  • ozer gul

    thanks :)

  • http://www.agent-seo.com Jacob Stoops

    Thank you for the script. One question. I noticed you guys have a Lightbox subscription overlay when I clicked download. Is that a plugin/script that is available somewhere? I’d love to use something similar for my site….Thanks!

  • Hadri Hilmi

    this is awesome!

  • http://www.tahutek.net/ Damar Riyadi

    Pretty cool!

  • Rx

    Nice try, but you try using this with other scripts on the page. I’ve tried the .htc approach for IE8 as well and it jus does not work for me.

  • http://maxromlin.com/sok-formular/ MAXIMILIAN

    [...] Man kan ladda ner den här: thefinishedbox.com/freebies/scripts/jquery-animated-search/ [...]

  • http://www.facebook.com/NguyentheTran Chuyện Bình Thường

    thanks verymuch

  • http://www.facebook.com/NguyentheTran Chuyện Bình Thường

    thanks verymuch
    very nice

  • WordPress User

    Any tips how to implement this in WordPress header?

  • http://www.gonzoblog.nl/2011/05/14/tweet-parade-no-19-may-2011/ Tweet-Parade (no.19 May 2011) | gonzoblog.nl

    [...] jQuery Smooth Animated Search Field Freebie – Want a cool search box? Look no further. Improve your search by trying this animated apple style search box. PSD also included in download. If you had an eagle eye you would have noticed earlier I posted a snippet of code which altered the default values for inputs on focus/blur. [...]

  • http://designhuntr.com/search-form-tutorials-for-inspiration/ 12 Search Form Tutorials Using CSS3, HTML5 and jQuery for Inspiration | A Web Design-Development Blog

    [...] 11) jQuery Search Box [...]

  • Akeelu

    Hi,

    This is really cool and makes the search-box look better then a just input box!

    Any idea for a fix to the top grey line in Safari?

    Thanks for your help in advance!!

  • http://twitter.com/device_lab device_lab

    Nice…Is this on github? Put it on the hub!

  • Carlos

    Thanks!

  • Mohamed Alioui

    Thank you

  • http://www.freebiewebresources.com/2013/09/free-css-search-forms-with-tutorials.html 20+ Beautiful Of Free CSS Search Forms With Tutorials

    [...] is subtle and fits many sites, but watch out for the jQuery markup if you are not familiar with it. MORE INFOStylish CSS3 Search Box TutorialStylish is not enough to describe this search bar. Add futuristic, [...]

  • http://eagletuts.com/20-beautiful-of-free-css-search-forms-with-tutorials/ 20+ Beautiful Of Free CSS Search Forms With Tutorials | EagleTuts

    [...] Some websites look good with animation, some do not. The animation shown here is subtle and fits many sites, but watch out for the jQuery markup if you are not familiar with it. MORE INFO [...]

  • http://www.webqeep.com/20-beautiful-of-free-css-search-forms-with-tutorials/ 20+ Beautiful Of Free CSS Search Forms With Tutorials

    [...] MORE INFO [...]

  • http://www.dzinewatch.com/2013/09/free-css-search-forms/ 20+ Awesome Free CSS Search Forms — DzineWatch

    [...] Animated Search Tutorial [...]

  • http://www.fantastithus.com/10-impresionantes-formularios-de-busqueda-creados-con-css-gratis/ 10+ Impresionantes Formularios de Búsqueda Creados con CSS Gratis • Fantastithus

    [...] Creados con CSSFormulario de Búsqueda AnimadoDetalles | Demo Campo de Búsqueda Animado con jQueryDetalles | DemoCrear un formulario de búsqueda usando solo CSSDetalles | DemoBusqueda Google Powered Site [...]

  • http://www.fantastithus.com/10-impresionantes-formularios-de-busqueda-creados-con-css/ 10+ Impresionantes Formularios de Búsqueda Creados con CSS • Fantastithus

    [...] Creados con CSSFormulario de Búsqueda AnimadoDetalles | Demo Campo de Búsqueda Animado con jQueryDetalles | DemoCrear un formulario de búsqueda usando solo CSSDetalles | DemoBusqueda Google Powered Site [...]

  • http://www.rafaxplayer.com/css3-coleccion-de-herramientas-y-resursos-online/ CSS3 Colección de herramientas y resursos online | rafaxplayer.blog

    [...] 5- Elegante en jquery y css3 [...]

blog comments powered by Disqus

Warning: file_get_contents(https://api.twitter.com/1/users/show.json?screen_name=tfbox&include_entities=true): failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/tfbox/public_html/wp-content/themes/beta/footer.php on line 12