Pull to refresh

Autosuggest

Reading time 2 min
Views 2.3K
Lumber room
Autosuggest или автозаполнение полей форм — отличное средство для облегчения работы клиентов при поиске или вбивании однотипных или повторяющихся данных в формы. Введённый в широкие массы благодаря Google suggest, эта техника быстра нашла поддержку среди web-разработчиков и добавила проблем тем кто отвечает за стабильность и архитектуру инфосистем во многом из-за увеличившийся в разы нагрузке на полнотекстовый поиск по базе данных. В данной статье я рассматриваю готовое решение от BrandSpankingNew, которое вероятно многие уже могли видеть на том же iconfinder.net, а теперь и на aleria.net.BSN Autosuggest 2.1.3 представляет из себя лишь набор css, изображений и js-обработчика. Установка очень простая. Необходимое input-поле обязательно должно иметь id параметр. После этого подгружается js и css. В самом конце создаётся инициализирующий объект, который в свою очередь привязывает к полю event-ы и занимается всей работой по получению сформированного ответа на запрос поиска.Инициализирующий объект с настройками: var suggest = new bsn.AutoSuggest('search_input', {
script:"search.php?",
varname:"q",
json:true,
shownoresults:false,
maxresults:5
});
Как можно видеть из настроек — мы привязываем к полю search_input автозаполнение, а всю процедуру поиска выполняет скрипт search.php. Он может выдавать результаты как в JSON, так и в XML формате, но поскольку нет необходимости в универсальном выводе (id,value,info прошиты в js), JSON можно сгенерировать и просто как строчки без полной трансформации php-объектов в JSON.Результат поиска в JSON-формате:
<code>{ results: [<br />	{ id: "1", value: "Foobar", info: "Cheshire" },<br />	{ id: "2", value: "Foobarfly", info: "Shropshire" },<br />	{ id: "3", value: "Foobarnacle", info: "Essex" }<br />] }</code>
Не забудьте ограничить размер слова хотя бы до 3-х букв. Скрипт сам сгенерирует div и установит его под полем, а дальше уже можно будет нажимая клавиши выбирать подходящий результат.
Total votes 11: ↑10 and ↓1 +9
Comments 4

jQuery Autocomplete: автозаполнение

Reading time 1 min
Views 21K
jQuery *
jQuery Autocomplete: автозаполнение
Если Вы пробовали что-то найти в Google, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно… © Gennady

Mooooooooooore
Total votes 53: ↑45 and ↓8 +37
Comments 30

Autocomplete в двух направлениях (bidirect)

Reading time 1 min
Views 592
Lumber room
Автозаполняемые поля можно встретить на многих сайтах, действительно в большенстве случаев они облегчают заполнение форм. Но ... На мой взгляд они облегчают заполнение тем кто знает, что он туда пишет. Интересное решение, проблемы предложил László Kozma, автозаполнение в двух направлениях. bidirect_autocpmlete
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 3

Настройка autocomplete для CakePHP в NetBeans 6.5

Reading time 1 min
Views 908
CakePHP *
Не секрет, что автокомплит в редакторах очень удобная штука, но в CakePHP слишком много магии (соглашений об именовании), чтобы он смог разобраться что к чему. Сейчас я расскажу, как объяснить автокомплиту NetBeans некоторые очень полезные вещи.

полезные вещи
Total votes 5: ↑4 and ↓1 +3
Comments 8

Консольные хитрости Питон: история команд + автодополнение

Reading time 3 min
Views 18K
Python *
Если вы разрабатываете программы на Питоне, то, уверен, вы хорошо знакомы с работой с ним в интерактивном режиме. Это самый простой и удобный способ проверить пришедшую в голову идею, запустить библиотечную функцию, пошагово прогнать какой-то алгоритм и т.п. без создания лишних мусорных файлов. Вобщем питоновская консоль — очень мощная и удобная вещь. У меня постоянно напрашивается сравнение с юникс-шеллом в языке. Если бы не две ложки дегтя в этой бочке меда: команду каждый раз приходится набирать заново, вместо того, чтобы просто нажать стрелку вверх и подправить команду, а также приходится писать много лишнего, что только добавляет опечаток и необходимости повторного набора. Вобщем я хочу как в баше: история + автодополнение.
Я удивлен почему это еще не сделано по умолчанию. Кстати, очень может быть, что это уже реализовано в вашей системе, и вам это совершенно неактуально — тогда можете совершенно смело пропустить эту статью. Возможно это пригодится кому-то другому. На попавшихся мне Macos, Freebsd, Debian и Fedora этого не было.

К счастью, это легко исправить.
Total votes 50: ↑46 and ↓4 +42
Comments 34

Нигма понимает с одной буквы

Reading time 1 min
Views 817
Search engines *
Мы, разработчики Nigma.ru, ввели новую фичу — теперь пользователи могут переходить на популярные сайты, нажав лишь одну клавишу.

У других поисковиков также недавно появились формы автозаполнения (подсказок), которые мало чем отличаются от форм операционных систем. Наша же форма лучше тем, что почти к каждому слову в форме сопоставлен релевантный сайт, переход на который можно осуществить нажатием стрелки вправо.

Стрелку вправо можно нажать и сразу после набора нескольких букв — тогда выбирается сайт, соответствующий самому популярному слову, начинающемуся на эти буквы. Например, набрав «li», и нажав стрелку вправо, вы попадете на linux.org.ru

Для самых популярных сайтов даже стрелку вправо не надо нажимать — можно просто зажать на несколько секунд соответствующую клавишу и перейти на нужный сайт. Например, нажав на «в» и отпустив клавишу через пару секунд, вы попадете на vkontakte.ru

Полностью новость про эту фичу: тут
Total votes 46: ↑33 and ↓13 +20
Comments 83

ropevim = vim + rope + python

Reading time 2 min
Views 4.8K
VIM *
Для python-разработчика и vim-юзера в одном человеке, ropevim приподнесет приятный сюрприз. Наконец-то в наш любимый редактор возможна безболезненная интеграция rope — python-библиотеки, предназначенной для рефакторинга. Для тех кто не слышал о rope, кратко перечислю некоторые из возможностей: довольно умное кододополнение, возможность переименования переменных и модулей, возможность перехода на описание объекта, где бы он ни оно не находилось, автоимпорт и прочее.
Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Comments 6

Gmail: Поиск по Gmail — легче.

Reading time 2 min
Views 11K
IT-companies
Translation
Оригинал

В команде Gmail мы считаем, что найти нужный электронный адрес среди тысяч сообщений, может быть столь же важными, как найти нужную веб-страницу среди миллиардов в интернете. Таким образом, для того чтобы сделать поиск в Gmail проще, мы сделали новую экспериментальную функцию в Gmail Labs: Автозаполнение Поиска.
Включите Автозаполнение Поиска на вкладке Labs в настройках Gmail, и Вы будете получать предложения, при вводе в окно поиска. Один из самых популярных поисков в Gmail это имена или адреса электронной почты, поэтому первого рода предложения, которые вы увидите — будут контакты. Некоторые имена не легко запомнить (моя фамилия является прекрасным примером!) — с этой новой функцией можно просто ввести несколько букв и выбрать требуемый контакт из списка. Легко и быстро.
image
Gmail предлагает параметры расширенного поиска, которые представляют собой мощное средство, позволяющее обнаружить то одно сообщение, которое вы имеете в виду. Вы можете искать в специальных местах или искать сообщения с вложениями конкретного типа (например фото). Предположим я хочу найти фото, которые мне прислал мой друг Chris. Мне нужно ввести его адрес, а затем filename:(jpg OR png). С Автозаполнением Поиска я могу набрать «photos» или «pictures», выбрать «has photos» из выпадающего списка (как на скриншоте ниже) и у меня сформируется поисковый запрос (filename:(jpg OR png). Также вы можете ввести слово «attachment» и Автозаполнение Поиска перечислит наиболее распространенные виды прикрепленных файлов для вас.
image
Одна из причин, по которым мы еще показываем вам этот гиковой запрос состоит в том, чтобы позволить вам адаптировать его к вашим потребностям. Например, если вы хотите включить TIFF файлы в результаты поиска, можно ввести для запроса: (JPG или PNG или TIFF).
Пользуйтесь и убедитесь, что это сэкономит вам время для поиска.
Total votes 51: ↑43 and ↓8 +35
Comments 18

RTM Context Autocomplete Menu

Reading time 5 min
Views 1.8K
JavaScript *
Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:

image

Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

Под катом интересные моменты реализации, описание функциональности, примеры, список известных багов и фич для реализации.
Читать дальше →
Total votes 64: ↑63 and ↓1 +62
Comments 33

Продвинутые формы — мультиселект с автокомплитом

Reading time 5 min
Views 6.9K
Django *
Наши пользователи следят за спецпредложениями авиакомпаний и дешевыми перелетами, каждому интересно своё направление, пунктов вылета и прилета — тысячи, пользователи хотят одновременно следить за несколькоми городами, странами или регионами. Появилась задача — как предоставить удобный механизм подписки? Без долгого тыканья в мульти селект, без кнопок «Добавить пункт вылета». Ответ выглядит так —

Решением стал контрол из Фейсбука и Контакта — пользователи знакомы с ним, а значит не нужно объяснять как он работает. Осталось скрестить его с django.
Читать дальше →
Total votes 77: ↑66 and ↓11 +55
Comments 41

Мой вариант MultipleInput + Autocomplete

Reading time 5 min
Views 5.8K
Django *
Для начала всех хотелось бы поздравить с наступающими праздниками!

А теперь к сути моего повествования.

Несколько недель назад мне потребовалась сделать выпадающие списки в django. Значения должны подгружаться автоматически по мере ввода и пользователь должен иметь возможность как выбрать значение из списка, так и добавить своё.

Для начала посмотрим, какой результат мы преследуем:


Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Comments 13

Google предлагает стандартизировать автозаполнение форм

Reading time 1 min
Views 3.4K
IT Standards *
Компания Google внедрила в браузер Chrome поддержку экспериментального атрибута autocomplete type и теперь обращается с призывом ко всем веб-мастерам использовать этот атрибут в описании всех онлайновых форм. Просто добавьте его в поле input, например, для email это может выглядеть так:

<input type=”text” name=”field1” x-autocompletetype=”email” />

Таким образом, владелец сайта может гарантировать, что функция Chrome Autofill точно сработает на этом поле.



Google сейчас договаривается с другими заинтересованными сторонами, чтобы стандартизировать данный атрибут как часть спецификаций HTML5. Пока что у него экспериментальный статус, что подчёркивается приставкой x- в полном написании x-autocompletetype.

Нынешний стандарт в данной области RFC 4112 практически нигде не используется и явно нуждается в обновлении.
Total votes 62: ↑56 and ↓6 +50
Comments 57

5 полезных батареек для Django

Reading time 3 min
Views 32K
Django *
Разрабатывая постоянно сталкиваешься с разнообразными задачами, которые часто решить в лоб не удаётся. Но многие задачи уже были решены кем-то — нужно только найти это решение.

Так, день за днём я насобирал небольшую коллекцию батареек, которые сильно облегчили мне жизнь. Чем и спешу поделиться:
Читать дальше →
Total votes 38: ↑33 and ↓5 +28
Comments 11

Автозакрытие скобок в Geany

Reading time 5 min
Views 6.1K
Website development *Open source *Programming *
Если вы пользовались редактором исходного кода Geany, то наверняка сталкивались с плохо предсказуемым поведением стандартного автозакрытия скобок и кавычек. Если не пользовались — рекомендую попробовать.

Geany замечательный редактор, но на протяжении всей его истории автозакрытие работало так:

func())

или так:

func()
{
    }}

Настало время поставить крест на ручной расстановке скобочек. Встречайте, новый режим автозакрытия в Geany:

image
История создания одного плагина
Total votes 29: ↑22 and ↓7 +15
Comments 9

Разбор строки адреса (улица [дом]) средствами Golang и Postgis

Reading time 3 min
Views 15K
PostgreSQL *Go *
Hi, %habrauser%.
Столкнулся я на днях с интересной задачей — пользователь вводит строку, которая может быть улицей с домом, просто улицей или вообще не улицей, а нам надо узнать имел ли он ввиду улицу с домом и соответствующее ему подсказать.
— Казалось бы чего проще — разбей строку по пробелу и наслаждайся — подумал Штирлиц
— А как насчет улицы Павла Корчагина — шепнула птица Обломинго
— Эм, ну номер дома же наверняка число — сказал Штирлиц
— Ага, корп1 — хорошее число
— Мдя, придется изобретать велосипед

Читать дальше →
Total votes 21: ↑11 and ↓10 +1
Comments 14

Делаем веб-формы удобнее для заполнения

Reading time 5 min
Views 27K
Google Developers corporate blog Website development *Search engines *
Translation
Привет, Хабр! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.

автозаполнение форм на смартфоне

Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

<input type="text" name="customerEmail" autocomplete="email"/>

Больше кода под катом!
Total votes 27: ↑24 and ↓3 +21
Comments 11

Мультиселект и автокомплит на AngularJS

Reading time 4 min
Views 24K
Website development *JavaScript *Angular *
Со списками множественного выбора на Ангуляре всегда было неважно. Существующие решения либо обертки над jQuery-плагином, либо выглядят как не пойми что, либо просто корявы. И у всех естественно особое уникальное АПИ, как будто пользователям делать больше нечего как вникать в ход мыслей разработчиков каждого плагина. Меня такое положение дел не устроило, поэтому написал свой велосипед. Спустя год он дозрел до публикации.

Та-дам! (и забавная история вконце)
Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Comments 71
1