Question

Hello dear users of the stackoverflow!

I really like the search form on this website, which is stretched when the user starts typing characters. I tried to understand the script myself, but my knowledge is insufficient for this purpose. As I understand it is implemented using jquery. And I’m curious – are there any demo examples of such implementation (as an option from the site of the jquery framework)?
Thank you in advance for your help!

Answer 1

Using an HTML form, you can use jQuery to animate the field.

I’ve created a basic form and simple jQuery script below. As for actually handling the search, you’ll need another page to submit the form to and actually preform the search.

---

HTML — Create your form and search field.

<form action='search.php' method='POST'>
<input type='search' name='searchQuery' id='inputSearch' placeholder='Search the site'>
</form>

jQuery — Check for a keypress(), if the field is not expanded already: animate it larger and set a variable to stop it from repeating the animation. Checking if the field has gone out of focus with blur(), animate the field to be normal sized and set a variable to indicate the field can be expanded again.

var isExpanded = false;

$(document).ready(function () {
    $('#inputSearch').keypress(function () {
        if (isExpanded == false) {
            $(this).animate({width: 500}, 'slow');
            isExpanded = true;
        }
    });

    $('#inputSearch').blur(function () {
        $(this).animate({width: 150}, 'slow');
        isExpanded = false;
    });
});