Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Ajax Autocomplete за 5 минут

August 09th, 2007 | Category: Ajax, CSS, Javascript | Автор: Александр

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

А как же встроить такую классную штуку у себя на сайте? Всё просто. Можно сесть и написать свой JavaScript, а можно позаимствовать уже готовый. А именно Autosuggest / Autocomplete with Ajax. По моему выглядит привлекательнее, чем на Google.

Инструкция:

1) Подгружаем 1 JavaScript файл

PLAIN TEXT
HTML:
  1. <script src="http://www.yourdomain.com/js/bsn.AutoSuggest_2.1.3_comp.js" type="text/javascript"></script>

2) Добавляем к любому текстовому полю функциональность Autosuggest. Допустим что у нашего поля id="ajaxed_field".

PLAIN TEXT
JavaScript:
  1. var options = {
  2. script: "suggest.php?",
  3. varname: "mytext",
  4. json: true,
  5. maxresults: 35
  6. };
  7. var as = new bsn.AutoSuggest('ajaxed_field', options);

Теперь, когда Вы начнёте печатать что нибудь в этом поле, браузер будет делать асинхронный запрос на http://www.yourdomain.com/suggest.php?mytext=то-что-вы-напечатали

На сервере не обязательно должен быть PHP. Это может быть Ruby on Rails, Java, ASP, не важно. Главное это в каком виде вернуть данные браузеру. Autosuggest скрипт поддерживает XML и JSON.

JSON объект должен иметь следующую структуру:

PLAIN TEXT
JavaScript:
  1. { results: [
  2. { id: "1", value: "Ajax", info: "Russia" },
  3. { id: "2", value: "Bier", info: "Deutschland" },
  4. { id: "3", value: "Cricket", info: "England" }
  5. ] }

И всё. Чтобы результат выглядел также красиво, как в видео - используйте CSS, который можно скачать в комплекте с JavaScript файлом с сайта разработчика.

del.icio.us Забобрить!

6 Comments so far

  1. Dima January 16th, 2008 21:50

    Что-то я не очень понимаю что куда нужно ставить…
    Например где вот это найти:

    JavaScript:
    var options = {
    script: “suggest.php?”,
    varname: “mytext”,
    json: true,
    maxresults: 35
    };
    var as = new bsn.AutoSuggest(’ajaxed_field’, options);

    Можете на примере показать что да как нужно устанавливать?
    Заранее спасибо!

  2. Dima January 16th, 2008 22:02

    Вот допустим у меня так сформирован этот код, исправьте - где неправильно?

    var options = {
    script: “test2.php?”,
    varname: “mytext”,
    json: true,
    maxresults: 35
    };
    var as = new bsn.AutoSuggest(’ajaxed_field’, options);

    { results: [
    { id: "1", value: "Ajax", info: "Russia" },
    { id: "2", value: "Bier", info: "Deutschland" },
    { id: "3", value: "Cricket", info: "England" }
    ] }

  3. Aleksandr January 17th, 2008 10:01

    В комплекте с библиотекой есть файл test.php

    Посмотри как он работает.

  4. after7days July 23rd, 2008 14:21

    Не работает с русским языком.
    На английском все нормально =(
    В чем может быть дело?

  5. alex September 9th, 2008 11:21

    не работает по-русски.
    как бы решить эту проблему?

  6. GaZZeta September 18th, 2008 15:53

    +1 тоже очень интересно как по русски заставить читать.

Leave a reply