JQuery автозаполнение вызывает прокрутку страницы без необходимости - PullRequest
Новая
       10

JQuery автозаполнение вызывает прокрутку страницы без необходимости

1 голос
/ 05 апреля 2011

У меня неприятная проблема с автозаполнением Jquery.У меня есть UL выпадающих опций, которые появляются под входом.ui-menu и ui-menu-items отображаются с width:1214px - я предполагаю, что это ширина документа или что-то в этом роде.Я не знаю, почему это происходит, но я могу переписать CSS, чтобы это исправить.

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

Все значения высот ul и li установлены в проводнике DOM на auto. Почему происходит прокрутка страницы?

Какие обходные пути используются для сохранения автозаполненияполе внутри строк?

CSS: 

.ui-menu {
  ...
  width:245px;
}
.ui-menu-item{
  cursor:pointer;
  list-style: none;
  ...
  width:245px;
}

JS: 

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
  var self = this;
  $.each( items, function( index, item ) {
    if (index < 10)
      {self._renderItem( ul, item );}
  });
}

Ввод:

<input type="text" class="Search" id="search_box"/>

Ответы [ 2 ]

1 голос
/ 12 июня 2015

Я решил эту проблему, используя опцию инициализации appendTo . Я думаю, что проблема в том, что меню автозаполнения с абсолютным положением все еще увеличивает высоту тела: установив опцию appendTo в div с height: 0px, я смог устранить проблему.

Пример:

Javascript: 

$( ".selector" ).autocomplete({
  appendTo: "#hidden-stuff"
});

HTML: 

<body>
  <input class="selector" type="text>
  <div id="hidden-stuff" style="height: 0px;"></div>
</body>
1 голос
/ 05 апреля 2011

Попробуйте установить / перезаписать z-индекс списка, который выпадает при поиске: 

z-index:999 or z-index:1000

Я не уверен, но это могло бы помочь. Другое решение - установить переполнение скрытым, когда пользователь ищет:

Итак, как только пользователь нажмет на поле ввода: 

$("html,body").css("overflow","hidden");

А когда поле ввода теряет фокус: 

$("html,body").css("overflow","auto");

Однако это кажется мне странным, поскольку пользовательский интерфейс jQuery должен работать правильно.

...