Подписка на блог

РСС — лучше всего

Ещё есть автоматические трансляции в Тумблере и Же-же. Если что-то не работает, напишите мне: ilyabirman@ilyabirman.ru.

Автодополнение

Разыскивается хороший скрипт автодополнения с выпадайкой в текстовом поле. Скрипт должен брать перечень вариантов откуда-нибудь (аджакс не нужен, варианты могут идти сразу в исходном ХТМЛе) и автодополнять ими при вводе. Ещё должна выпадать выпадайка с подходящими вариантами.

Главное, что мне нужно, и чего нет в скриптах, которые я нахожу — это поддержка ввода через запятую нескольких элементов, для каждого из которых должно работать своё автодополнение со своей выпадайкой, причём выпадайка должна выпадать именно под тем местом, где вводится вводимое слово.

Должно работать под всеми браузерами. Может использовать jQuery.js. Не должно тормозить.

Помогайте, пожалуйста.
Подписаться на блог
Поделиться
Отправить
36 комментариев
Александр
Использую во всех своих проектах http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ и он вполне устраивает. Удобный.
Если я правильно понимаю про «несколько» элементов через запятую, то такое там есть, единственно что — «выпадайка» таки выпадает на весь контрол, но для каждого слова между разделителями своя. Однако, если нужно выпадение именно своим словом и критично — то и она не подойдёт наверное, да.
Илья Бирман
Глючит в Опере.
Фемистоклюс
В качестве наводки, где это уже используется: в жж, когда теги вводишь, он каждый автодополняет, в том числе если они идут через запятую.
Alexey Burlakov
В ЖЖ он автодополняет, но выпадайки там вроде сроду не было. Возможно это связанно с тем, что сложно получить координаты курсора и баундинг-бокс фрагмента текста в <input type=«text»..

По крайней мере некоторое время назад дело обстояло именно так. На ум приходит пара хаков, но это всё крайне некрасиво.
Юрий
Про ввод через запятую непонятно.

$.each({’#input1’: [...], ’#input2’: [...]}, function (selector, values) {
$(selector).autocomplete(values)
})
Так что ли?
Илья Бирман
Демостраница не работает. Не знаете, где можно посмотреть его?
Илья Бирман
Он мало того, что не ставит пробел после запятой, так ещё и мой съедает :-)
Egor
Может в новой версии это исправили. Да и изменить недолго
Spectator
У меня такой используется: http://www.codeproject.com/KB/scripting/jsactb.aspx
Он не идеален, но меня устраивает. (В опере не работают кнопки вверх-вниз, но можно допилить).
Алисей Лебедев
Скорее всего любой плагин придется допиливать под работу с Оперой, выпадание списка в правильном месте, корректную обработку Esc, Tab, Enter и стрелок.

Конкретно для ввода тегов такие бывают: http://devthought.com/wp-content/projects/mootools/textboxlist/Demo/
Этот на MooTools, но есть подобный и на jQuery, демку не могу найти.
Илья Бирман
По энтеру в Опере сразу же отправляет форму после вставки варианта из автодополнения :-( Что за чертовщина. Ещё кнопки Home/End не работают. В остальном — неплохо, спасибо.
Антон Вернигор
Ну как раз опера сама умеет то, что тут описано, вообще без скриптов.
Но чтобы этим воспользоваться, придется решить задачу два раза — для оперы и остальных.
Андрей Кузьмин
2Алисей Лебедев: они одинаковые и для mootools http://devthought.com/projects/mootools/textboxlist/ и для jquery http://devthought.com/projects/jquery/textboxlist/
Ромочка
А на мой взгляд, плагин к jQuery от bassistance.de чуть ли не единственный, который не глючит в Опере.
Илья Бирман
Выбираешь слово, ставишь запятую, слово пропадает вместе с запятой.
Ромочка
Илья, в месяцах пробовал? Это не глюк, а фича: настройки автозаполнения этого поля такие.
Илья Бирман
В месяцах то же самое.
Ромочка
Я о чем и говорю, что это только в месяцах.
Илья Бирман
Нет, до этого я в месяцах не пробовал — мне бы в голову не пришло использовать автодополнение в месяцах или вводить месяцы через запятую.
Богдан Кравцов
У нас на Сокре работает автоподстановка нескольких меток:
http://sokr.ru/search/

Только выпадающее меню с начала строки начинается, а под первой буквой вводимого сейчас слова.
Илья Бирман
Что туда вписать, чтобы попробовать?

Выпадайку нарисовать в правильном месте невозможно технически что ли?
Богдан Кравцов
Чтобы попробовать, нужно в поле «метки» начать писать что-нибудь. Например, Челябинск, Чехия.. — достаточно одной буквы «ч». 
Илья Бирман
Это понятно, но, к сожалению, никакие приходящие мне в голову буквы (включая ч), не вызывают появления выпадайки. А ещё почему-то иногда вдруг начинает писать красным.
Алисей Лебедев
Многие плагины страдают тем, что в Опере сабмитят форму по энтер. Смутно помню в чем дело, вроде они preventDefault забывают.

Размещение выпадалки под местом ввода можно сделать с помощью скрытого div white-space:pre, в который копируется текст по мере ввода. Меряем его ширину и сдвигаем выпадающий список соотвественно. Изменения затрагивают только обработчик onchange. Сложности возникают когда input заполнен под завязку, и ввод нового текста начинает двигать содержимое инпута влево.
Alexey Burlakov
Алисей, это не проблема. О переполнении поля ввода мы знаем потому что ширина скрытого дива становится больше ширины ввода и можем обрабатывать соответственно.

Но это не отменяет некошерности решения (О:
Илья Бирман
Соответственно — это как именно?
Alexey Burlakov
Ну, например, берём другой скрытый див, копируем туда только последнее слово, смотрим на его ширину. Это примерно то расстояние от правого края поля ввода, где должен быть левый край подсказки.

Я же говорю, что способ некошерный.
Илья Бирман
Нет, так по полю я по-прежнему могу ходить влево-вправо курсором-то. Представьте себе, что длина текста втрое больше, чем длина поля, а я при этом редактирую что-то где-то в середине. Подсказка при этом может оказаться в любом месте, и, насколько я понимаю, подставного дива недостаточно, чтобы определить, где её рисовать.
Alexey Burlakov
Да, недостаточно. Я же говорю затея дохлая.

Как альтернатива: сделать инпут, который будет после ввода запятой создавать слева от себя span или div с текстом и одновременно удалять этот завершённый тег из своего value. Сделать этот инпут достаточно широким чтобы туда влез даже длинный тег. При перемещении курсора в начало — перескакивать на предыдущий тег, превращать его обратно из div’а в input. Долго плясать с ситуациями типа «вставили длинную строку с запятыми» и т. д.

Я вот только не помню можно ли у инпута узнать текущую позицию курсора.
Рома
Не «аджакс», а «аякс»!
adjax/ajax ;-)
Илья Бирман
Простите, но я учился английскому языку, а не немецкому.
Артур
«Простите, но я учился английскому языку, а не немецкому.»
Все правильно — аякс. «Аджакс» говорят только те, кто выпендривается. Аджакс, псссс, щас здохну.
Илья Бирман
Вы можете ещё говорить «Майкл Яксон», если вам хочется, а я лучше повыпендриваюсь всё же.
clops
Илья, вот этот скрипт отвечает всем твоим запросам:

http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter

я сам им пользуюсь и он мне кажется охуенным!
Илья Бирман
Почему же там демки нет? Блин, как люди так делают. Как вот ты догадался, что в ней есть что-то хорошее?
Антон Вернигор
Илья, аякс — уже достаточно устоявшееся и обрусевше слово. Незачем его насильственно русифицировать ещё раз. Из-за использования такого варианта только в этом блоге аякс аджаксом не станет.
Я понимаю желание избавиться от английских вкраплений латиницей в русском, но тут это уже произошло. Просто не так, как вы хотите. Но заимствованное слово совершенно не обязательно должно сохранять в русском произношение и прочие черты оригинала.
Илья Бирман
А почему вы считаете, что это устоявшееся слово? Мне откуда знать, как его кто произносит. Большинство пишет латиницей. Я не в состоянии читать «аякс», когда передо мной чётко написано AJAX. У меня нет желания ни от чего избавляться или переворачивать историю. Я просто вижу, что написано, и читаю это.
Артур
Согласен с Антоном.
Джексона я называю Джексоном, не тупи.
В разговоре с англоговорящим человеком, я, естественно, тоже буду говорить «аджакс». Но в разговоре с русскоязычной аудиторией это чистый выпендреж и занудство так говорить. Такое произношение неестественно. Нужно русифицировать произношение многих английских слов.

В разговоре с русскоговорящим, слово
error — произносится «эррор», а не «эрэ» (как правильно, в транскрипции) («Вылетел эррор», например, говорят. Скажи «Вылетел эрэ» и тебя никто не поймет);
data — так и говорится «дата», а не «дэитэ»;
Microsoft Word — говорится «ворд», а не «вё:д»;
PHP — «пэ-ха-пэ», а не «пи-айч-пи»;
HTML — «ха-тэ-эм-эл», а не «эйч-ти-эм-эл»;
?Torrent — «уТоррэнт», а не «мюТоррэнт».

И так далее и тому подобное — как пишется, так и говорится. И не нужно занудства и показухи с пафосом.
Илья Бирман
В разговоре с англоговорящим надо говорить «эйджэкс»; аджакс — это по-русски; error — еррор (а не э); «дата» — это число и месяц, а data — это данные; Мюторрент я называю мюторрентом, по нехитрой причине: он так называется. Я не понимаю, почему я должен потворствовать чьей-то тупости или неграмотности.

Будет слово «аякс» в словаре — тогда поговорим.
clops
«Почему же там демки нет? Блин, как люди так делают. Как вот ты догадался, что в ней есть что-то хорошее?»

Я специально для офсайта соберу на днях демку, потому что этот компонент — нереально крут, удобен и прост в использовании!
Догадался я банальным «методом тыка»: искал для своих нужд то, что ищешь ты, и не мог поверить что этого нет в «стандартных» библиотеках типа prototype и/или jquery
Илья Бирман
Блин, там в комплекте куча какой-то штуки непонятной, Rakefile, что-то на руби, какие-то тесты — к чему это всё? И там ещё лежит prototype.js. Мне он не нужен, ведь я уже использую jQuery. Или я что-то не так понимаю?
clops
«...И там ещё лежит prototype.js...» — пардон, тогда ты в пролёте. Нужен только прототайп и визуальное расширение scriptaculous. Но демку я всё равно сделаю!
Илья Бирман
Ещё у него нужен server url, а я хочу дать ему список сразу, не могу понять, как этого добиться. Демку покажи как сделаешь, пожалуйста.
Артур
«Я не понимаю, почему я должен потворствовать чьей-то тупости или неграмотности»
Походу ты много из себя возомнил. А потворствуешь ты своей тупой принципиальной упрямости.
Сергей Даровских
В словарях: http://dic.academic.ru/dic.nsf/enc_colier/2062/%D0%90%D0%AF%D0%9A%D0%A1 :)
Я тоже «аджакс» говорю.
7wat
Артур: Microsoft Word — говорится «ворд», а не «вё:д»;

«Microsoft» — говорится «микрософт», view — говорится «виев», zoom — «зоом», да-да-да, проходили.
Ваня Бибилов
> Я не в состоянии читать «аякс», когда передо мной чётко написано AJAX.
А я всегда думал, что AJAX и JSON — это такие милые аллюзии на двух древних греков — Аякса и Ясона.
Michael
То, что вы как-то говорите, совершенно не значит, что так говорят все. Я вот говорю «Аджакс» и «Джейсн», а про МюТоррент и дату вообще смешно.
И если в английском буква «r» произносится не так, как в русском «р», это еще не значит, что ее нет и надо в транскрипции ее опустить на фиг.
А некоторые MySQL «мускулом» называют, аж тошнит от этой анатомии.
Вообще, прежде всего нужно четко знать правильное произношение на языке оригинала (если по-немецки — то по-немецки, как в Фольксвагеном) — для этого есть, например forvo.com,
а уже потом можно упрощать для внутреннего пользования, чтобы не сломать язык об «пи-эйч-пи», но всегда иметь представление о том, как правильно.
А правильно так, как в языке оригинала.
Антон Вернигор
Майкл, если бы правильно было так, как в языке оригинала, мы бы разговаривали преимущественно на смеси латыни и греческого.
Michael
Ну так в большой части так и есть! Латынь и греческий, это вообще для всех европейских языков так, не вижу тут проблемы.
А для транскрипции есть определенные правила, в соответствии с которыми берется слово на языке оригинала и в нем просто заменяются звуки,
которых в русском языке нет, на наиболее похожие. Вот для «J» это «Дж». Вы же не говорите «Яббер» или «Йон».
Не вижу ни одной причины, по которой «Аджакс» стоит называть «Аяксом», вообще все эти разночтения возникают из-за того, что слова сначала появляются в использовании, а уже потом доходят до тех, кто разбирается в русском языке и его правилах.
Если бы эти слова мы узнавали из словаря, разночтений бы не возникало. Но вообще, ясное дело, победит тот вариант, которого больше :) Хотя скорее технология отомрет, чем слово устоится.
Алексей Рубцов
Илья Бирман
В нём нет нормального автодополнения с выделением остатка слова, есть только выпадайка. Изначально выбран первый элемент в ней. Тупость: пишешь «th,» — вставляется Days of Thunder. А я хочу, чтобы было th. Оно должно помогать, а не мешать мне писать.
Константин Перескоков
Добрый день. На http://delicious.com/save работает выпадайка, удовлетворяющая всем вашим требованиям, кроме позиционирования прямо под вводимым словом.

Пользовательский интерфейс
Доступны два раздела
электронного учебника

Популярное