Проблемы с прокруткой в ​​списке результатов автозаполнения Script.aculo.us / CakePHP - PullRequest
Новая
       22

Проблемы с прокруткой в ​​списке результатов автозаполнения Script.aculo.us / CakePHP

0 голосов
/ 10 июля 2009

Использование помощника Ajax для CakePHP (в настоящее время 1.2.3.8166) для предоставления списка результатов $ ajax-> autoComplete и возврат списка результатов в качестве визуализированного представления, если вы используете мышь (и даже колесо мыши) чтобы прокрутить результаты, все хорошо. С другой стороны, использование клавиш со стрелками имеет неприятный эффект неловкой прокрутки представления: если я нажимаю вниз, поле выбора и вся страница перемещаются в нижнюю часть панели просмотра браузера; нажатие вверх имеет противоположный эффект перемещения его наверх.

Кто-нибудь еще заметил это поведение и что-то думал? результирующий список обеспечивается, например, этим кодом (он получает $ people из функции autoComplete () в контроллере): 

<ul>
<?php foreach($people as $person): ?>
<li><?php echo $person['Person']['id']; ?></li>
<?php endforeach; ?>
</ul>

(Просто пример, я на самом деле показываю идентификатор и имя / фамилию / коммерческое имя).

CSS для списка выглядит следующим образом: 

div.auto_complete {
    position: absolute;
    width: 250px;
    background-color: white;
    border: 1px solid #888;
    margin: 0px; padding: 0px;
}
div.auto_complete ul{
    list-style: none;
    margin: 0px;
}

1 Ответ

2 голосов
/ 31 июля 2009

Я получил ответ на эту проблему в новостной группе cake-php (доступно на http://groups.google.com/group/cake-php). Постер указал на эту страницу с решением , и я скопировал его сюда:

  1. Открыть файл controls.js (должен быть в app/webroot/js)

  2. Найдите функцию markPrevious и измените ее на: 

    markPrevious: function() {
    if (this.index > 0) {
        this.index--;
    } else {
        this.index = this.entryCount-1;
        this.update.scrollTop = this.update.scrollHeight;
    }
    selection = this.getEntry(this.index);
    selection_top = selection.offsetTop;
    if (selection_top < this.update.scrollTop) {
        this.update.scrollTop = this.update.scrollTop-
        selection.offsetHeight;
    }
},

  3. Найдите функцию markNext и измените ее на: 

    markNext: function() {
    if(this.index < this.entryCount-1) {
        this.index++;
    } else {
        this.index = 0;
        this.update.scrollTop = 0;
    }
    selection = this.getEntry(this.index);
    selection_bottom = selection.offsetTop+selection.offsetHeight;
    if(selection_bottom > this.update.scrollTop+this.update.offsetHeight) {
        this.update.scrollTop = this.update.scrollTop + selection.offsetHeight;
    }
  },

  4. Поиск функции updateChoices и изменение строк 

    this.stopIndicator();
this.index = 0;

    до 

    this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;

  5. Наконец, попробуйте поведение. Если сначала это не работает, попробуйте удалить файлы кэша в app/tmp/cache (или очистить ваш любимый серверный кэш), кеш браузера и попробуйте снова Очистка app/tmp/cache у меня сработала.

...