Я недавно реализовал JQuery Комбокс с автозаполнением пользовательского интерфейса, и все отлично работает вместо одной ошибки, которую я нашел, и не могу найти решение. Я не могу опубликовать свой код здесь, поскольку это код компании, но я увидел, что проблема видна на демонстрационной странице jquery ui:
https://jqueryui.com/autocomplete/#maxheight
Теперь, если вы введете «a» в поле ввода, вы получите панель с результатами автозаполнения, которая представляет собой <ul>
элемент с <li>
элементами внутри и, поскольку он имеет заданную высоту, будет вертикальная прокрутка что идеально. Теперь поместите указатель мыши на панель с результатами, прокрутите список с помощью колесика мыши, а затем просто переместите указатель мыши обратно в поле ввода. Вы увидите, что список начинает прокручиваться вверх. Сколько бы раз вы ни делали это движение указателя мыши вверх и вниз, список будет продолжать расти, что является реальной проблемой для моей реализации.
Я создал обычный список <ul>
с заданной высотой и переполнением. y свойство имитировать прокручиваемую панель пользовательского интерфейса, но у меня нет этой проблемы.
Вот .gif с проблемой, и каждый может проверить на своей странице. Это происходит с Chrome browser
![screen gif](https://i.stack.imgur.com/iq8pO.gif)
ОБНОВЛЕНИЕ
!!! РЕШЕНО !!!
После Во время игры я обнаружил, что проблема в jquery, пытаясь сфокусировать верхний элемент. По какой-то причине он решает, что элемент, который должен быть в фокусе, на самом деле является предыдущим элементом в списке, которого нет даже в области просмотра. Поэтому при фокусировке на этом элементе меню «перепрыгивает» на предыдущий элемент и, следовательно, прокручивается вверх. Мне удалось устранить эту проблему, изменив разницу между элементами <li>
до 2px (я пробовал с 1px, но этого недостаточно).
На реальной демонстрационной странице Jquery мне пришлось увеличить ее до 5px, чтобы она действительно работала.
Вы можете изменить значение margin
в jqyery-ui. css в .ui-menu .ui-menu-item
селектор. Это создает достаточно места между элементами, и jquery не «запутывается», какой элемент должен быть в фокусе.
![enter image description here](https://i.stack.imgur.com/OI8kf.gif)