morontt.info

JavaScript → typeahead.js - Автокомплитер и Twitter Bootstrap.

Прикручивал автодополнение к полям формы на сайте, использующем Twitter Bootsrap, выбрал по инерции знакомый и привычный jQuery UI и тут же столкнулся с проблемой. Поля, использующие bootstrap-datepicker.js разнесло до полной неузнаваемости. Для начала просто отключил стили, необходимые для автокомплитера из jQuery UI, предполагая, что проблема именно в них, да и просто из любопытства, однако это не помогло - внешний вид улучшился, но до исходного варианта было ещё далеко :)

Морочить себе голову не стал, пытаясь соединить несовместимое, просто вбил в поисковик "twitter bootstrap autocomplete". И сразу наткнулся на то, что надо, т.е. на typeahead.js. Тут официальная страница с примерами, хорошая документация на GitHub. Добавить нечего. Просто брать и использовать. Внешний вид хорошо вписывается в общий стиль, не выглядит чужеродным :)

typeahead.js

g-plus-icon
comments powered by Disqus
Учтите, что комментарии добавляются только при включённом JavaScript в браузере. В ином случае информация хоть и не пропадёт бесследно, но будет отправлена в спам и вряд ли хоть кто-нибудь её увидит.
Хуторная Елена
avatar
Красивый шрифт, которым jQuery UI написано, только сейчас обратила внимание )))
Ответить
morontt
avatar
Ты про курсив в тексте? Или который на скриншоте? Хотя на последнем и надписи такой нету.
Ответить
Хуторная Елена
avatar
Про курсив - такой почти рукописный каллиграфический )))
Ответить
morontt
avatar
А шрифт стандартный, начиная с Windows Vista :) Или у тебя что-то более раннее?
Ответить
Хуторная Елена
avatar
А какой это шрифт? Мне он кажется незнакомым. У меня семерка сейчас стоит.
Ответить
morontt
avatar
У меня это Consolas, у тебя тоже, наверняка.



На днях запись сделаю о необходимых инструментах, чтобы ты и сама могла ими пользоваться. Как никак какие-то темы для жежешки ведь делаешь, точно не помешают :)
Ответить
Хуторная Елена
avatar
А я знаю такой шрифт и люблю его, но у меня он по-другому выглядит. А запись да, хотя так не люблю с инструментами разбираться )))
Ответить
morontt
avatar
Если ты о том, как jQuery UI на скриншоте выше выглядит - так это совсем другой шрифт :) А инструменты всяческие нужны, я без них почти как без рук.
Ответить
Хуторная Елена
avatar
А пост про инструменты так и не выложил ))) Хотя некогда было наверняка, учитывая недавнюю поездку.
Ответить
morontt
avatar
Да вот отложен до лучших времён, как раз, когда из делов вылезу :) А тут ещё и пост про посещённую конференцию надо писать.
Ответить
<script>alert('dfgdfg')</script>
avatar
<script>alert('dfgdfg')</script>
Ответить
morontt
avatar
Опять ты, Владимир, балуешься? :)
Ответить
Guest
avatar
тест
Ответить
morontt
avatar
Что за нашествие тестеров? :)
Ответить
Foton
avatar
Тест.
Ответить
morontt
avatar
Есть контакт.
Ответить
SlowProg
avatar
А тут я вообще удачно зашёл! По-моему у тебя самый полезный блог. Во-первых, библиотека в скорем времени и мне понадобиться (ты избавил меня от гугления). А во-вторых, когда я спустился в комментарии, то наславу посмеялся. Тут самая интересная часть статьи xDDDDD

Ну, и я не буду отставать от модных тенденций и потестю тебя:

rm -rf /
Ответить
morontt
avatar
Он был бы более полезным, если бы я писАл сюда чаще :) А так никак руки не доходят. Запланирую какую-то полезность и в долгий ящик, т.е. в НИКОГДА.
Ответить
SlowProg
avatar
Известная проблема. Треклятый долгий ящик.
Ответить
BazMaster
avatar
А как при использовании typeahead вызывать отправку формы при клике на подсказку? То есть чтобы подсказка не просто вставилась в форму поиска, а и отправила форму.
Ответить
morontt
avatar
Вопрос ещё актуален? Что-то сомневаюсь :)

Как-то упустил этот комментарий...
Ответить
BazMaster
avatar
Ага, решил следующим способом:
$(".search-input").typeahead({
...
}).on('typeahead:selected', function(){$(".search-form").submit();});
Где .search-form - это класс формы, которую нужно отправить. =)
Ответить
morontt
avatar
Вряд ли бы я предложил что-то принципиально иное :) Если только в самой библиотеке нет уже предусмотренных методов на этот счёт, но в доки не заглядывал.
Ответить
Iliya
avatar
тест :)
Ответить
morontt
avatar
Request timed out.
Ответить
25 комментариев Написать что-нибудь
Поля, помеченные asterisk, обязательны для заполнения.
Адрес электронной почты нигде не отображается, необходим только для обратной связи.
Веб-сайт вводите в формате http://example.org, при желании, конечно.