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

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

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

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

Помогайте, пожалуйста.

Подписаться на блог
Отправить
Дальше
36 комментариев
Александр 2009

Использую во всех своих проектах http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ и он вполне устраивает. Удобный.
Если я правильно понимаю про «несколько» элементов через запятую, то такое там есть, единственно что — «выпадайка» таки выпадает на весь контрол, но для каждого слова между разделителями своя. Однако, если нужно выпадение именно своим словом и критично — то и она не подойдёт наверное, да.

Илья Бирман 2009

Глючит в Опере.

Фемистоклюс 2009

В качестве наводки, где это уже используется: в жж, когда теги вводишь, он каждый автодополняет, в том числе если они идут через запятую.

Alexey Burlakov 2009

В ЖЖ он автодополняет, но выпадайки там вроде сроду не было. Возможно это связанно с тем, что сложно получить координаты курсора и баундинг-бокс фрагмента текста в <input type=«text»..

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

Юрий 2009

Про ввод через запятую непонятно.

$.each({’#input1’: [...], ’#input2’: [...]}, function (selector, values) {
$(selector).autocomplete(values)
})
Так что ли?

Илья Бирман 2009

Демостраница не работает. Не знаете, где можно посмотреть его?

Илья Бирман 2009

Он мало того, что не ставит пробел после запятой, так ещё и мой съедает :-)

Egor 2009

Может в новой версии это исправили. Да и изменить недолго

Spectator 2009

У меня такой используется: http://www.codeproject.com/KB/scripting/jsactb.aspx
Он не идеален, но меня устраивает. (В опере не работают кнопки вверх-вниз, но можно допилить).

Алисей Лебедев 2009

Скорее всего любой плагин придется допиливать под работу с Оперой, выпадание списка в правильном месте, корректную обработку Esc, Tab, Enter и стрелок.

Конкретно для ввода тегов такие бывают: http://devthought.com/wp-content/projects/mootools/textboxlist/Demo/
Этот на MooTools, но есть подобный и на jQuery, демку не могу найти.

Илья Бирман 2009

По энтеру в Опере сразу же отправляет форму после вставки варианта из автодополнения :-( Что за чертовщина. Ещё кнопки Home/End не работают. В остальном — неплохо, спасибо.

Антон Вернигор 2009

Ну как раз опера сама умеет то, что тут описано, вообще без скриптов.
Но чтобы этим воспользоваться, придется решить задачу два раза — для оперы и остальных.

Андрей Кузьмин 2009

2Алисей Лебедев: они одинаковые и для mootools http://devthought.com/projects/mootools/textboxlist/ и для jquery http://devthought.com/projects/jquery/textboxlist/

Ромочка 2009

А на мой взгляд, плагин к jQuery от bassistance.de чуть ли не единственный, который не глючит в Опере.

Илья Бирман 2009

Выбираешь слово, ставишь запятую, слово пропадает вместе с запятой.

Ромочка 2009

Илья, в месяцах пробовал? Это не глюк, а фича: настройки автозаполнения этого поля такие.

Илья Бирман 2009

В месяцах то же самое.

Ромочка 2009

Я о чем и говорю, что это только в месяцах.

Илья Бирман 2009

Нет, до этого я в месяцах не пробовал — мне бы в голову не пришло использовать автодополнение в месяцах или вводить месяцы через запятую.

Богдан Кравцов 2009

У нас на Сокре работает автоподстановка нескольких меток:
http://sokr.ru/search/

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

Илья Бирман 2009

Что туда вписать, чтобы попробовать?

Выпадайку нарисовать в правильном месте невозможно технически что ли?

Богдан Кравцов 2009

Чтобы попробовать, нужно в поле «метки» начать писать что-нибудь. Например, Челябинск, Чехия.. — достаточно одной буквы «ч».

Илья Бирман 2009

Это понятно, но, к сожалению, никакие приходящие мне в голову буквы (включая ч), не вызывают появления выпадайки. А ещё почему-то иногда вдруг начинает писать красным.

Алисей Лебедев 2009

Многие плагины страдают тем, что в Опере сабмитят форму по энтер. Смутно помню в чем дело, вроде они preventDefault забывают.

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

Alexey Burlakov 2009

Алисей, это не проблема. О переполнении поля ввода мы знаем потому что ширина скрытого дива становится больше ширины ввода и можем обрабатывать соответственно.

Но это не отменяет некошерности решения (О:

Илья Бирман 2009

Соответственно — это как именно?

Alexey Burlakov 2009

Ну, например, берём другой скрытый див, копируем туда только последнее слово, смотрим на его ширину. Это примерно то расстояние от правого края поля ввода, где должен быть левый край подсказки.

Я же говорю, что способ некошерный.

Илья Бирман 2009

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

Alexey Burlakov 2009

Да, недостаточно. Я же говорю затея дохлая.

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

Я вот только не помню можно ли у инпута узнать текущую позицию курсора.

Рома 2009

Не «аджакс», а «аякс»!
adjax/ajax ;-)

Илья Бирман 2009

Простите, но я учился английскому языку, а не немецкому.

Артур 2009

«Простите, но я учился английскому языку, а не немецкому.»
Все правильно — аякс. «Аджакс» говорят только те, кто выпендривается. Аджакс, псссс, щас здохну.

Илья Бирман 2009

Вы можете ещё говорить «Майкл Яксон», если вам хочется, а я лучше повыпендриваюсь всё же.

clops 2009

Илья, вот этот скрипт отвечает всем твоим запросам:

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

я сам им пользуюсь и он мне кажется охуенным!

Илья Бирман 2009

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

Антон Вернигор 2009

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

Илья Бирман 2009

А почему вы считаете, что это устоявшееся слово? Мне откуда знать, как его кто произносит. Большинство пишет латиницей. Я не в состоянии читать «аякс», когда передо мной чётко написано AJAX. У меня нет желания ни от чего избавляться или переворачивать историю. Я просто вижу, что написано, и читаю это.

Артур 2009

Согласен с Антоном.
Джексона я называю Джексоном, не тупи.
В разговоре с англоговорящим человеком, я, естественно, тоже буду говорить «аджакс». Но в разговоре с русскоязычной аудиторией это чистый выпендреж и занудство так говорить. Такое произношение неестественно. Нужно русифицировать произношение многих английских слов.

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

И так далее и тому подобное — как пишется, так и говорится. И не нужно занудства и показухи с пафосом.

Илья Бирман 2009

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

Будет слово «аякс» в словаре — тогда поговорим.

clops 2009

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

Я специально для офсайта соберу на днях демку, потому что этот компонент — нереально крут, удобен и прост в использовании!
Догадался я банальным «методом тыка»: искал для своих нужд то, что ищешь ты, и не мог поверить что этого нет в «стандартных» библиотеках типа prototype и/или jquery

Илья Бирман 2009

Блин, там в комплекте куча какой-то штуки непонятной, Rakefile, что-то на руби, какие-то тесты — к чему это всё? И там ещё лежит prototype.js. Мне он не нужен, ведь я уже использую jQuery. Или я что-то не так понимаю?

clops 2009

«...И там ещё лежит prototype.js...» — пардон, тогда ты в пролёте. Нужен только прототайп и визуальное расширение scriptaculous. Но демку я всё равно сделаю!

Илья Бирман 2009

Ещё у него нужен server url, а я хочу дать ему список сразу, не могу понять, как этого добиться. Демку покажи как сделаешь, пожалуйста.

Артур 2009

«Я не понимаю, почему я должен потворствовать чьей-то тупости или неграмотности»
Походу ты много из себя возомнил. А потворствуешь ты своей тупой принципиальной упрямости.

Сергей Даровских 2009

В словарях: http://dic.academic.ru/dic.nsf/enc_colier/2062/%D0%90%D0%AF%D0%9A%D0%A1 :)
Я тоже «аджакс» говорю.

7wat 2009

Артур: Microsoft Word — говорится «ворд», а не «вё:д»;

«Microsoft» — говорится «микрософт», view — говорится «виев», zoom — «зоом», да-да-да, проходили.

Ваня Бибилов 2009

Я не в состоянии читать «аякс», когда передо мной чётко написано AJAX.

А я всегда думал, что AJAX и JSON — это такие милые аллюзии на двух древних греков — Аякса и Ясона.

Michael 2009

То, что вы как-то говорите, совершенно не значит, что так говорят все. Я вот говорю «Аджакс» и «Джейсн», а про МюТоррент и дату вообще смешно.
И если в английском буква «r» произносится не так, как в русском «р», это еще не значит, что ее нет и надо в транскрипции ее опустить на фиг.
А некоторые MySQL «мускулом» называют, аж тошнит от этой анатомии.
Вообще, прежде всего нужно четко знать правильное произношение на языке оригинала (если по-немецки — то по-немецки, как в Фольксвагеном) — для этого есть, например forvo.com,
а уже потом можно упрощать для внутреннего пользования, чтобы не сломать язык об «пи-эйч-пи», но всегда иметь представление о том, как правильно.
А правильно так, как в языке оригинала.

Антон Вернигор 2009

Майкл, если бы правильно было так, как в языке оригинала, мы бы разговаривали преимущественно на смеси латыни и греческого.

Michael 2009

Ну так в большой части так и есть! Латынь и греческий, это вообще для всех европейских языков так, не вижу тут проблемы.
А для транскрипции есть определенные правила, в соответствии с которыми берется слово на языке оригинала и в нем просто заменяются звуки,
которых в русском языке нет, на наиболее похожие. Вот для «J» это «Дж». Вы же не говорите «Яббер» или «Йон».
Не вижу ни одной причины, по которой «Аджакс» стоит называть «Аяксом», вообще все эти разночтения возникают из-за того, что слова сначала появляются в использовании, а уже потом доходят до тех, кто разбирается в русском языке и его правилах.
Если бы эти слова мы узнавали из словаря, разночтений бы не возникало. Но вообще, ясное дело, победит тот вариант, которого больше :) Хотя скорее технология отомрет, чем слово устоится.

Алексей Рубцов 2009
Илья Бирман 2009

В нём нет нормального автодополнения с выделением остатка слова, есть только выпадайка. Изначально выбран первый элемент в ней. Тупость: пишешь «th,» — вставляется Days of Thunder. А я хочу, чтобы было th. Оно должно помогать, а не мешать мне писать.

Константин Перескоков 2009

Добрый день. На http://delicious.com/save работает выпадайка, удовлетворяющая всем вашим требованиям, кроме позиционирования прямо под вводимым словом.

Мои книги