Автодополнение
Разыскивается хороший скрипт автодополнения с выпадайкой в текстовом поле. Скрипт должен брать перечень вариантов откуда-нибудь (аджакс не нужен, варианты могут идти сразу в исходном ХТМЛе) и автодополнять ими при вводе. Ещё должна выпадать выпадайка с подходящими вариантами.
Главное, что мне нужно, и чего нет в скриптах, которые я нахожу — это поддержка ввода через запятую нескольких элементов, для каждого из которых должно работать своё автодополнение со своей выпадайкой, причём выпадайка должна выпадать именно под тем местом, где вводится вводимое слово.
Должно работать под всеми браузерами. Может использовать jQuery.js. Не должно тормозить.
Помогайте, пожалуйста.
Использую во всех своих проектах http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ и он вполне устраивает. Удобный.
Если я правильно понимаю про «несколько» элементов через запятую, то такое там есть, единственно что — «выпадайка» таки выпадает на весь контрол, но для каждого слова между разделителями своя. Однако, если нужно выпадение именно своим словом и критично — то и она не подойдёт наверное, да.
Глючит в Опере.
В качестве наводки, где это уже используется: в жж, когда теги вводишь, он каждый автодополняет, в том числе если они идут через запятую.
В ЖЖ он автодополняет, но выпадайки там вроде сроду не было. Возможно это связанно с тем, что сложно получить координаты курсора и баундинг-бокс фрагмента текста в <input type=«text»..
По крайней мере некоторое время назад дело обстояло именно так. На ум приходит пара хаков, но это всё крайне некрасиво.
Про ввод через запятую непонятно.
$.each({’#input1’: [...], ’#input2’: [...]}, function (selector, values) {
$(selector).autocomplete(values)
})
Так что ли?
http://code.google.com/p/sexy-combo/
Демостраница не работает. Не знаете, где можно посмотреть его?
http://savintsev.ru/tmp/examples/ 2.0.6
Он мало того, что не ставит пробел после запятой, так ещё и мой съедает :-)
Может в новой версии это исправили. Да и изменить недолго
У меня такой используется: 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 заполнен под завязку, и ввод нового текста начинает двигать содержимое инпута влево.
Алисей, это не проблема. О переполнении поля ввода мы знаем потому что ширина скрытого дива становится больше ширины ввода и можем обрабатывать соответственно.
Но это не отменяет некошерности решения (О:
Соответственно — это как именно?
Ну, например, берём другой скрытый див, копируем туда только последнее слово, смотрим на его ширину. Это примерно то расстояние от правого края поля ввода, где должен быть левый край подсказки.
Я же говорю, что способ некошерный.
Нет, так по полю я по-прежнему могу ходить влево-вправо курсором-то. Представьте себе, что длина текста втрое больше, чем длина поля, а я при этом редактирую что-то где-то в середине. Подсказка при этом может оказаться в любом месте, и, насколько я понимаю, подставного дива недостаточно, чтобы определить, где её рисовать.
Да, недостаточно. Я же говорю затея дохлая.
Как альтернатива: сделать инпут, который будет после ввода запятой создавать слева от себя span или div с текстом и одновременно удалять этот завершённый тег из своего value. Сделать этот инпут достаточно широким чтобы туда влез даже длинный тег. При перемещении курсора в начало — перескакивать на предыдущий тег, превращать его обратно из div’а в input. Долго плясать с ситуациями типа «вставили длинную строку с запятыми» и т. д.
Я вот только не помню можно ли у инпута узнать текущую позицию курсора.
Не «аджакс», а «аякс»!
adjax/ajax ;-)
Простите, но я учился английскому языку, а не немецкому.
«Простите, но я учился английскому языку, а не немецкому.»
Все правильно — аякс. «Аджакс» говорят только те, кто выпендривается. Аджакс, псссс, щас здохну.
Вы можете ещё говорить «Майкл Яксон», если вам хочется, а я лучше повыпендриваюсь всё же.
Илья, вот этот скрипт отвечает всем твоим запросам:
http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter
я сам им пользуюсь и он мне кажется охуенным!
Почему же там демки нет? Блин, как люди так делают. Как вот ты догадался, что в ней есть что-то хорошее?
Илья, аякс — уже достаточно устоявшееся и обрусевше слово. Незачем его насильственно русифицировать ещё раз. Из-за использования такого варианта только в этом блоге аякс аджаксом не станет.
Я понимаю желание избавиться от английских вкраплений латиницей в русском, но тут это уже произошло. Просто не так, как вы хотите. Но заимствованное слово совершенно не обязательно должно сохранять в русском произношение и прочие черты оригинала.
А почему вы считаете, что это устоявшееся слово? Мне откуда знать, как его кто произносит. Большинство пишет латиницей. Я не в состоянии читать «аякс», когда передо мной чётко написано AJAX. У меня нет желания ни от чего избавляться или переворачивать историю. Я просто вижу, что написано, и читаю это.
Согласен с Антоном.
Джексона я называю Джексоном, не тупи.
В разговоре с англоговорящим человеком, я, естественно, тоже буду говорить «аджакс». Но в разговоре с русскоязычной аудиторией это чистый выпендреж и занудство так говорить. Такое произношение неестественно. Нужно русифицировать произношение многих английских слов.
В разговоре с русскоговорящим, слово
error — произносится «эррор», а не «эрэ» (как правильно, в транскрипции) («Вылетел эррор», например, говорят. Скажи «Вылетел эрэ» и тебя никто не поймет);
data — так и говорится «дата», а не «дэитэ»;
Microsoft Word — говорится «ворд», а не «вё:д»;
PHP — «пэ-ха-пэ», а не «пи-айч-пи»;
HTML — «ха-тэ-эм-эл», а не «эйч-ти-эм-эл»;
µTorrent — «уТоррэнт», а не «мюТоррэнт».
И так далее и тому подобное — как пишется, так и говорится. И не нужно занудства и показухи с пафосом.
В разговоре с англоговорящим надо говорить «эйджэкс»; аджакс — это по-русски; error — еррор (а не э); «дата» — это число и месяц, а data — это данные; Мюторрент я называю мюторрентом, по нехитрой причине: он так называется. Я не понимаю, почему я должен потворствовать чьей-то тупости или неграмотности.
Будет слово «аякс» в словаре — тогда поговорим.
«Почему же там демки нет? Блин, как люди так делают. Как вот ты догадался, что в ней есть что-то хорошее?»
Я специально для офсайта соберу на днях демку, потому что этот компонент — нереально крут, удобен и прост в использовании!
Догадался я банальным «методом тыка»: искал для своих нужд то, что ищешь ты, и не мог поверить что этого нет в «стандартных» библиотеках типа prototype и/или jquery
Блин, там в комплекте куча какой-то штуки непонятной, Rakefile, что-то на руби, какие-то тесты — к чему это всё? И там ещё лежит prototype.js. Мне он не нужен, ведь я уже использую jQuery. Или я что-то не так понимаю?
«...И там ещё лежит prototype.js...» — пардон, тогда ты в пролёте. Нужен только прототайп и визуальное расширение scriptaculous. Но демку я всё равно сделаю!
Ещё у него нужен server url, а я хочу дать ему список сразу, не могу понять, как этого добиться. Демку покажи как сделаешь, пожалуйста.
«Я не понимаю, почему я должен потворствовать чьей-то тупости или неграмотности»
Походу ты много из себя возомнил. А потворствуешь ты своей тупой принципиальной упрямости.
В словарях: http://dic.academic.ru/dic.nsf/enc_colier/2062/%D0%90%D0%AF%D0%9A%D0%A1 :)
Я тоже «аджакс» говорю.
Артур: Microsoft Word — говорится «ворд», а не «вё:д»;
«Microsoft» — говорится «микрософт», view — говорится «виев», zoom — «зоом», да-да-да, проходили.
А я всегда думал, что AJAX и JSON — это такие милые аллюзии на двух древних греков — Аякса и Ясона.
То, что вы как-то говорите, совершенно не значит, что так говорят все. Я вот говорю «Аджакс» и «Джейсн», а про МюТоррент и дату вообще смешно.
И если в английском буква «r» произносится не так, как в русском «р», это еще не значит, что ее нет и надо в транскрипции ее опустить на фиг.
А некоторые MySQL «мускулом» называют, аж тошнит от этой анатомии.
Вообще, прежде всего нужно четко знать правильное произношение на языке оригинала (если по-немецки — то по-немецки, как в Фольксвагеном) — для этого есть, например forvo.com,
а уже потом можно упрощать для внутреннего пользования, чтобы не сломать язык об «пи-эйч-пи», но всегда иметь представление о том, как правильно.
А правильно так, как в языке оригинала.
Майкл, если бы правильно было так, как в языке оригинала, мы бы разговаривали преимущественно на смеси латыни и греческого.
Ну так в большой части так и есть! Латынь и греческий, это вообще для всех европейских языков так, не вижу тут проблемы.
А для транскрипции есть определенные правила, в соответствии с которыми берется слово на языке оригинала и в нем просто заменяются звуки,
которых в русском языке нет, на наиболее похожие. Вот для «J» это «Дж». Вы же не говорите «Яббер» или «Йон».
Не вижу ни одной причины, по которой «Аджакс» стоит называть «Аяксом», вообще все эти разночтения возникают из-за того, что слова сначала появляются в использовании, а уже потом доходят до тех, кто разбирается в русском языке и его правилах.
Если бы эти слова мы узнавали из словаря, разночтений бы не возникало. Но вообще, ясное дело, победит тот вариант, которого больше :) Хотя скорее технология отомрет, чем слово устоится.
А если гугловый попробовать: http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/autocomplete-basic.html
В нём нет нормального автодополнения с выделением остатка слова, есть только выпадайка. Изначально выбран первый элемент в ней. Тупость: пишешь «th,» — вставляется Days of Thunder. А я хочу, чтобы было th. Оно должно помогать, а не мешать мне писать.
Добрый день. На http://delicious.com/save работает выпадайка, удовлетворяющая всем вашим требованиям, кроме позиционирования прямо под вводимым словом.