Подсказка к поисковой строке

Сегодня понадобилось сделать такую же штуку, как у Яндекса под поисковой строкой:

Подсказка к поисковой строке

То есть, чтобы под поисковой строкой появлялось слово, фраза, по которой можно ткнуть и она перескочит в поисковое поле, человеку останется только нажать «Найти». Как у Яндекса на картинке выше: «Например, весна». Кликнул по «весне» и она перескочила в поисковое поле. И чтобы при каждой загрузке страницы появлялось случайное слово в подсказке, будь то «весна», «осень» или что-нибудь позаковыристей.

Так вот, нашёл рецепт по реализации подобной фишки. Не как на Яндексе, конечно, но для необходимого мне сайта — самое то. Хороший рецепт, я попробовал, у меня всё получилось. И чтобы рецепт вдруг не пропал, как это обычно происходит со всем интересным в сети, перескажу его тут на всякий случай.

Всё просто.

1. Есть, значит, примерно такая поисковая форма:

Добавляем туда строчку:

Теперь форма выглядит так:

Именно в <span id=’findword’></span> и будет впоследствии показываться наша подсказка.

2. Теперь в тело страницы с поисковой формой вписываем следующий скрипт:

Скрипт вписываем ниже поисковой формы, в идеале — где-нибудь перед тегом </body>

3. Как видно из скрипта, он ссылается на файл randsearch.php, лежащий в корне сайта. Этот файл мы сами создаём с таким же именем и заливаем, да, в корень сайта. Имя файла и путь до него, конечно, можно поменять на любые, не забывая при этом указать всё в скрипте.

Внутри этого randsearch.php пишем следующую балалайку:

Тут слова «беременность», «еда» и прочие сочувствующие им выражения меняем на необходимые нам, не забывая про кавычки и запятые. А в [rand(0,7)] последней цифрой указываем количество слов, вписанных строкой выше за минусом одного, потому что первое число — 0 — считается первым словом в списке. То есть, возьмём пример выше: там 8 слов и словосочетаний, стало быть, случайная выборка должна указываться как [rand(0,7)]. Если вписали 20 слов, тогда пишем [rand(0,19)].

Ну, а внешний вид формы допиливается, как вы знаете, через всякие cssы.

Всё, форма готова, подсказки должны подсасываться в случайном порядке. Кажись, всё просто и понятно. Если что, маякуйте в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *