Форма поиска настройки (как в stackoverflow) с JavaScript

Question

Здравствуйте, дорогие пользователи stackoverflow!

Мне очень нравится форма поиска на этом сайте, которая растягивается, когда пользователь начинает печатать символы. Я пытался понять сценарий сам, но моих знаний для этого недостаточно. Как я понимаю, это реализовано с помощью jquery. И мне любопытно - есть ли демонстрационные примеры такой реализации (как вариант с сайта фреймворка jquery)? Заранее благодарю за помощь!

Answer 1

Используя форму HTML , вы можете использовать jQuery для анимации поля.

Ниже я создал базовую форму и простой скрипт jQuery.Что касается фактической обработки поиска, вам понадобится еще одна страница, чтобы отправить форму и фактически выполнить поиск.

---

HTML - Создайте форму и поле поиска.

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

jQuery - Проверить нажатие клавиши (), если поле еще не развернуто: анимируйте его больше и установите переменную, чтобы остановить егоповторяя анимацию.Проверяя, не сфокусировалось ли поле с помощью blur (), анимируйте поле с нормальным размером и установите переменную, чтобы указать, что поле можно снова расширить.

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;
    });
});

Answer 2

Я сделаю что-то вроде этого:

var expandedWidth = "350px",
    width = "200px";

//Expand the input el when user types first character
$("#input").keypress(function(){
    width = this.style.width;
    if(width !== expandedWidth){
        this.style.width = expandedWidth;
    }
});

//Set it back to the default/initial width when it loses focus
$("#input").blur(function(){
    this.style.width = width;
});

пример