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

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


    Demo



    Я предлагаю вам использовать версию autocomplete от bassistance т.к. в их последнеей (1.0) версии присутствует фикс от бага в котором ие не хотел выводить красивый выход селекта…

    Скачать можно здесь: Download

    Тестировалось в: Firefox 2, IE 6 & 7, Opera 9, Safari 3

    Пример:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    />
    />





    API Reference: /> (try "C" or "E")



    Все эксемплы присутствуют в скрипте… да и для русских символов используйте мультибайтовые символы с хидерами.

    Немного еще можно почитать: здесь
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

      +1
      При сколько-либо значительной базе ответов это автозаполнение основательно нагружает компьютер на котором бегает база данных. Некоторые ухищрения конечно помогают - если все заранее индексировать и держать отдельно табличку в которой все будет разложено по полочкам. Для магазинов например таскать из каталога названия, самое то. А вот организовывать поиск по сайту так уже сложнее. В остальном выглядит привлекательно.
        +16
        На google видим suggest?
        Собственно ставьте memcache как раз для бд самое оно..
          –1
          Google плохой пример )) у них там такие сервера, таакииеее ))
            0
            у них знаете и база такаааааааааааааааая!
              +1
              Сервера у них, между прочим, самые обычные. Они берут не мощностями, а правильной и продуманной архитектурой.
            0
            Кэширование рулит, но имхо для поиска по сайту - оно нафиг не надо (я про саджест такой вот)
              0
              Искать по сайту не надо, для этого есть Google. =] Опять же, хотя бы ради экономии своего и процессорного времени, можно использовать его поиск.
              А по базе искать - это хорошо. Города, даты, и подобные данные форм регистрации - просто отлично, помоему. Потому что выпадающие списки стран и городов, поля для простого ввода даты - это издевательство для пользователя. =]
              0
              наверно нужно тогда вести отдельную таблицу с поисковыми запросами, и выдавать самые частые
                +6
                что с вашим русским?
                  +3
                  эксемплы... хидеры...

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

                  Говорите, пожайлуста, по-русски.
                    0
                    Это удобно,когда пользователю надо заполнить город проживания,например.И грузить особо не будет
                      0
                      Интересно, а кто-нить изучался, действительно ли пользователи часто эти используют? В Русской Википедии тоже кстати добавили :).
                        –1
                        Здесь >> http://jquery.bassistance.de/autocomplete/demo/
                          0
                          Смотрим в топик.. ссылка на эту же демонстрацию там...
                            +1
                            блин, комментарий съелся!
                            (писал ночью и не стал ждать 5 минут для репостинга).

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

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

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

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

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

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

                                  хмм, в свое время писал такое, но вроде код покомпактнее выходил (несколько десятков строк на 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);
                                    0
                                    Код не смотрел, но предполагаю что iframe'ы для борьбы с select в IE6. Не любит когда его пытаются дивами накрывать :) Хотя мне нравится такой финт ушами:

                                    document.getElementsByTagName('input')[i].style.visibility='hidden';
                                    +1
                                    Отлично! Спасибо за статью!
                                      +1
                                      Да, читая тут всякие комменты (отрицательные в основном) по поводу Гугла не понимаю, что людей может не устраивать. Например запомнить все фамилии тех или иных людей - дудки, а если они в выпадающем окне - самолёт красота. Так что - ПАСИБА от всего сердца!
                                        0
                                        http://www.dyve.net/jquery/?autocomplete Вот такой плагинчик есть. Кто-нить дайте кармы чуть-чуть, хочу по GWT обсуждение завести.
                                          +1
                                          таких плагинов не счесть :)
                                          вот, к примеру, мой самописный: http://code.google.com/p/jqac/
                                            0
                                            Ну не то чтобы прямо не счесть. Около 6-7 штук.
                                            Вот тут чел как раз попытался собрать описание на все, что нашел jQuery autocomplete plugins.
                                            0
                                            С Оперой 10 плагинчик подглючивает: не дает ввести скобочки() и воскл. знак! — это как минимум.
                                            Ну и чтобы отсабмиттить форму после выбора элемента из списка нужно либо дважды щелкнуть по кнопке submit либо enter — но опять же два раза…

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

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

                                              Самое читаемое