Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > google поиск стрелочки клавиатуры

Автор: Samotnik 23.4.2009, 21:35

сделал поиск как в гугле, т.е. вводиш букву в строку поиска она летит на сервер и результат записывается в div
Сейчас нужно сделать обработку стрелочек клавиатуры.
т.е. как в гугле ввел букву - внизу появился список результатов, и по этим результатам можно передвигаться стрелочками. Так как это реализовано ? smile

Автор: Soah 23.4.2009, 22:15

http://code.google.com/p/instant-autocompleter/

Автор: Samotnik 24.4.2009, 09:09

Soah,

штука прикольная, только почему - то заюзать не получается ее :(
Другие варианты есть ? smile

Автор: Samotnik 24.4.2009, 09:42

Soah, как заставить этот скрипт работать ?
я пишу вот так

Код


<html>
<head>
<script type='text/javascript' src='instant_autocompleter.js'></script>
<script type="text/javascript">
  new InstantAutocompleter($('my-field'), ["Apple", "Orange", "Banana"]);
  
  var input = $$('input.needs-autocompleting').first();

var collection = ["Apple", "Orange", "Banana"];
  
var collection = function(value) { return ['a','b','c']; }

var options = {
  // whether or not the first match in the list is selected
  firstSelected: false,
  // limit on the number of matching results to display
  numResults: 5,
  // regex for what to look for before  match.
  // if you want to match any string inside, for example,
  // this should be empty.
  beforeMatch: /(?:^|\s)/,
  // whether or not a tab event should be successful
  continueTabOnSelect: true,
  // whether this is a tokenized, multivalue list
  multivalue: false,
  // token splitter regex if this is a multivalue list
  tokenSplitter: /[^\w\d_-]/,
  // transform separator typed when you select an item into this one instead
  transformSeparator: ', '
};
new InstantAutocompleter(input, collection, options);
</script>
</head>
<body>
<input type="text" id="my-field" />
</body>
</html>

ошибки :

Цитата

Class is not defined
[Break on this error] var InstantAutocompleter = Class.create({
instant_...pleter.js (line 43)
$ is not defined
[Break on this error] new InstantAutocompleter($('my-field'), ["Apple", "Orange", "Banana"]);

Добавлено через 2 минуты и 54 секунды
по идее, вот так должно работать

Код


<html>
<head>
<script type='text/javascript' src='instant_autocompleter.js'></script>
</head>
<body>
<input type="text" id="my-field" />
<script type="text/javascript">
  new InstantAutocompleter($('my-field'), ["Apple", "Orange", "Banana"]);
</script>
</body>
</html>

но не работает smile

и ошибок нету :(

Автор: Samotnik 24.4.2009, 10:00

БУГАГА
Я исходный код страницы их вставил себе на локалку и он не работает smile

В чем проблема smile

Автор: Soah 24.4.2009, 10:22

Samotnik,
http://code.google.com/p/instant-autocompleter/

Цитата

The project requires Prototype 1.6.0.4

http://instantautocompleter.appspot.com/
работает?

Автор: Samotnik 24.4.2009, 10:47

Soah, я же говорю
открыл в FF http://instantautocompleter.appspot.com/
нажал Ctrl + U Затем все выделил, скопировал и вставил себе. И не работает ничего smile

Цитата(Soah @ 24.4.2009, 10:22

)

The project requires Prototype 1.6.0.4

увидел потом, подключил - результат тот же, нулевой

Автор: Soah 24.4.2009, 10:56

Samotnik, я не знаю что ты там делаешь, и как подключаешь, но у меня всё работает.

файл -> сохранить как -> страница полностью

Добавлено через 1 минуту и 26 секунд
Samotnik, а что ты вводишь в текстовое поле?

Автор: Soah 24.4.2009, 11:33

скачиваем и подключаем эти файлы
http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js
http://instant-autocompleter.googlecode.com/files/instant_autocompleter_0.1.js

Код


<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="instant_autocompleter_0.1.js"></script>
...
</head>
...
<input type="text" id="my-field" />
<script type="text/javascript">
    var values = ["111222", "111333", "111444", "111223"];
    new InstantAutocompleter($('my-field'), values);
</script>
...

прописываем стили, и всё должно работать.

Автор: Samotnik 24.4.2009, 11:55

странно почему сразу не заработало ... smile

Автор: Samotnik 24.4.2009, 12:32

Soah, mootools и prototype конфликтуют ?
я просто подключил прототайп - у меня ошибки начались в мутулзе сыпаться smile

Добавлено через 3 минуты и 23 секунды
Soah, другой способ реализовать это ? smile

У меня мутулз - он конфликтует с прототайпом.

Автор: Soah 24.4.2009, 15:35

С mootools никогда не работал

попробуй поменять(find and repalce) в prototype
$( -> $prototype(

Добавлено через 1 минуту и 21 секунду

Код


<script type="text/javascript">
    var values = ["111222", "111333", "111444", "111223"];
    new InstantAutocompleter($prototype('my-field'), values);
</script>

Автор: Soah 24.4.2009, 16:50

http://labs.1520mm.ru/suggest/index2.html

Добавлено

http://www.linkexchanger.su/2008/39.html

http://web-linux.ru/?p=267

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Автор: Samotnik 24.4.2009, 19:54

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

Пэ.Эс.
Ссылки аффигенные, особенно http://web-linux.ru/?p=267 , но мне уже поздно переделывать, я уже свое навоял smile

Автор: Soah 24.4.2009, 20:20

Samotnik, а исходник смотрел smile

Код


    onKeyDown: function(event)  {
        // ...
        case Event.KEY_UP:
            this.markPrevious();
            stop = true;
            break;
        
        case Event.KEY_DOWN:
            // тут можно что-то поставить, например alert('key down');
            this.markNext();
            stop = true;
            break;