Isis28 апр 2008 в 16:05

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

1 мин

22K

jQuery *

+37

Комментарии 30

NYBR 28 апр 2008 в 17:28

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

Isis 28 апр 2008 в 17:33

На google видим suggest?
Собственно ставьте memcache как раз для бд самое оно..

ha2bj 28 апр 2008 в 19:45

Google плохой пример )) у них там такие сервера, таакииеее ))

nooze 28 апр 2008 в 21:30

у них знаете и база такаааааааааааааааая!

Xternal 29 апр 2008 в 07:25

Сервера у них, между прочим, самые обычные. Они берут не мощностями, а правильной и продуманной архитектурой.

NULL_byte 28 апр 2008 в 19:13

Кэширование рулит, но имхо для поиска по сайту - оно нафиг не надо (я про саджест такой вот)

notRly 28 апр 2008 в 20:38

Искать по сайту не надо, для этого есть Google. =] Опять же, хотя бы ради экономии своего и процессорного времени, можно использовать его поиск.
А по базе искать - это хорошо. Города, даты, и подобные данные форм регистрации - просто отлично, помоему. Потому что выпадающие списки стран и городов, поля для простого ввода даты - это издевательство для пользователя. =]

bdsoft 28 апр 2008 в 19:44

наверно нужно тогда вести отдельную таблицу с поисковыми запросами, и выдавать самые частые

alexbig 28 апр 2008 в 20:09

что с вашим русским?

kulikoff 28 апр 2008 в 20:23

эксемплы... хидеры...

Неужели нельзя написать "примеры" или "заголовки"?

Говорите, пожайлуста, по-русски.

TsarS 28 апр 2008 в 20:39

Это удобно,когда пользователю надо заполнить город проживания,например.И грузить особо не будет

Iskin 28 апр 2008 в 20:47

Интересно, а кто-нить изучался, действительно ли пользователи часто эти используют? В Русской Википедии тоже кстати добавили :).

iSlayter 28 апр 2008 в 22:24

Здесь >> http://jquery.bassistance.de/autocomplete/demo/

Isis 28 апр 2008 в 22:28

Смотрим в топик.. ссылка на эту же демонстрацию там...

iSlayter 29 апр 2008 в 11:54

блин, комментарий съелся!
(писал ночью и не стал ждать 5 минут для репостинга).

так вот. там есть страшная бага. страшная для пользователя. Пример с textarea, где после выбора города ставится запятая и выбирается другой город. так вот вы попробуйте там вместо буквы города поставить, например, "[", и всё содержимое поля исчезнет.

приятно? мне нет.

жжуть.
а за пост выражаю благодарность. пишите ещё, как-говорится.

гуд лак.

AmirL 28 апр 2008 в 23:01

Для ввода тегов :)

makis 29 апр 2008 в 02:00

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

Ситауция такова. Есть сайт журнала, связанного с электроникой. На сайте 30 рубрик. Для каждой из рубрик свои ключевые слова. По 10–15 слов на рубрику. Таким образом выходит около 400 слов.

Они хранятся отдельно в таблице. Плюс к этим ключевикам добавляются новые поисковые запросы от пользователей при задействовании поиска. Таким образом в таблице хранятся самые популярные слова, которые высвечиваются в момент ввода запроса.

Co0l3r 29 апр 2008 в 02:38

все помешались на этом jQuery

ibnteo 29 апр 2008 в 08:50

Вы сравните решение той же задачи на чистом JavaScript и с использованием другой js-библиотеки, возможно тоже "помешаетесь" :)

kashey 29 апр 2008 в 03:19

Угу, а я верен жене и прототипу.
И вообще не понимаю причом тут жкери и сужест.
Четыре строчки js против полукилометра кода на сервере?
иде баланс?
использую у себя на сайте для автодополнялки адрессов. Кешируй промежуточные результаты.. не кешируй..
Иногда ТАКОЙ БРЕД ПИШУТ, а если не бред то С ТАКОЙ ОРФОГРАФИЕЙ(этим я правда и сам страдаю) что ни мем не кешед, ни бамбук не куриться..

sunnybear 29 апр 2008 в 04:02

хмм, в свое время писал такое, но вроде код покомпактнее выходил (несколько десятков строк на jQuery, ибо много событий отслеживать нужно), да и iframe там ни к чему — все можно через div'ы делать...

выходило как-то так:

/* function to add keyword drop-down lists */

        var keyfunc = function(){

/* set autocomplete to off */

            $(this).attr("autocomplete","off");

            var id=$(this).attr("id"),idd="div"+id,arr=eval(id.substr(0,4)),c='';



/* show list of possible key words */

            var showKeyWords = function(){

...

            }

...

            $(this).keydown(function(event){

                var a=$(this).val(),e=event.keyCode;

                if (a&&a.length>1&&e!=191&&e!=32&&e!=13) {

                    switch (e) {

                        case 40:

                            if (keyWordStarted) {

                                b=$("#"+idd+" a:eq("+(keyWordRem+1)+")");

                                $("#"+idd+" a").attr("class","");

/* select choosen key word */

                                if (b.attr("title")) {

                                    b.attr("class","sel");

                                    addKeyWord(id,arr[b.attr("rel")]);

                                    keyWordRem++;

                                } else {

/* round-robin */

                                    if (keyWordRem == keyWordTotal) {

                                        keyWordRem=0;

                                        b=$("#"+idd+" a:eq(0)");

                                        b.attr("class","sel");

                                        addKeyWord(id,arr[b.attr("rel")]);

                                    } else {

/* restore key word */

                                        $(this).val(keyWordStored);

                                        keyWordRem++;

                                    }

                                }

                            }

                            break;

                        case 38:

                            if (keyWordStarted) {

                                b=$("#"+idd+" a:eq("+(keyWordRem-1)+")");

                                $("#"+idd+" a").attr("class","");

/* select choosen key word */

                                if (b.attr("title")) {

                                    b.attr("class","sel");

                                    addKeyWord(id,arr[b.attr("rel")]);

                                    keyWordRem--;

                                } else {

/* round-robin */

                                    if (keyWordRem == -1) {

                                        keyWordRem=keyWordTotal-1;

                                        b=$("#"+idd+" a:eq("+keyWordRem+")");

                                        b.attr("class","sel");

                                        addKeyWord(id,arr[b.attr("rel")]);

                                    } else {

/* restore key word */

                                        $(this).val(keyWordStored);

                                        keyWordRem--;

                                    }

                                }

                            }

                            break;

                        case 8:

                            c=a.replace(/.*,\s/,"").replace(/.$/,"");

                            showKeyWords();

                            break;

                    }

                } else {

                    $("#"+idd).hide();

                    keyWordRem=-1;

                }

            });

/* store key word */

            $(this).keyup(function(event){

...

            });

/* 'clean' key word, break arrows pressing for input string horizontal run */

            $(this).keypress(function(event){

...

            });

/* clean input */

            $(this).focus(function(){

...

            });

/* disable submit if user press 'enter' on auto-fill form */

            $("#"+idd).parent().parent().parent().submit(function(){

...

            });

        };

...

/* keyword auto-fill logic */

        $("input.keyword").each(keyfunc);

        $("a.remkey").click(keyremfunc);

AntonVovchenko 29 апр 2008 в 11:30

Код не смотрел, но предполагаю что iframe'ы для борьбы с select в IE6. Не любит когда его пытаются дивами накрывать :) Хотя мне нравится такой финт ушами:

document.getElementsByTagName('input')[i].style.visibility='hidden';

croatian 29 апр 2008 в 06:50

Отлично! Спасибо за статью!

gremli 29 апр 2008 в 07:07

Да, читая тут всякие комменты (отрицательные в основном) по поводу Гугла не понимаю, что людей может не устраивать. Например запомнить все фамилии тех или иных людей - дудки, а если они в выпадающем окне - самолёт красота. Так что - ПАСИБА от всего сердца!

lazant 29 апр 2008 в 07:15

http://www.dyve.net/jquery/?autocomplete Вот такой плагинчик есть. Кто-нить дайте кармы чуть-чуть, хочу по GWT обсуждение завести.

clonyara 29 апр 2008 в 08:20

таких плагинов не счесть :)
вот, к примеру, мой самописный: http://code.google.com/p/jqac/

Tonik 4 ноя 2008 в 16:20

Ну не то чтобы прямо не счесть. Около 6-7 штук.
Вот тут чел как раз попытался собрать описание на все, что нашел jQuery autocomplete plugins.

Shaddix 3 окт 2009 в 04:48

С Оперой 10 плагинчик подглючивает: не дает ввести скобочки() и воскл. знак! — это как минимум.
Ну и чтобы отсабмиттить форму после выбора элемента из списка нужно либо дважды щелкнуть по кнопке submit либо enter — но опять же два раза…

Вынудило искать альтернативы.

Shaddix 3 окт 2009 в 05:45

… вынудило залезть в исходники и подправить :)

nicothin 9 дек 2009 в 01:35

ищу планиг автозаполнения для своего блога — хочу «удобно» вводить теги :)
как в ЖЖ.
эта штука только одно слово «автодополняет», или несколько?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий