jQuery Autocomplete Scrollable Dropdown

Question

Я работаю с текстовым полем автозаполнения jQuery.Мой код и скрипт работают нормально, но теперь мне нужен «выпадающий список (по осям X и Y)» вместо простого выпадающего списка.

Скрипт, используемый для облегчения выпадающего списка автозаполнения:

$(function () {
    $("#TextBox").autocomplete({
        source: "home/search",
        dataType: 'json',
        minLength: 1,
        // max: 10,
        // scroll:true
    });
});

Answer 1

Вы можете установить ось x и / или y для прокрутки, но это делается не через скрипт автозаполнения, а через стиль автозаполнения. Скрипт не несет ответственности за то, как элементы отображаются, только за то, как они взаимодействуют. Особый стиль, который вы хотите изменить, это класс ui-autocomplete.

Допустим, вы хотите, чтобы выпадающий список не превышал максимум 200 пикселей и ширину 250 пикселей (что позволяет уменьшать его, если для его заполнения недостаточно результатов). Затем вы добавите это в свой CSS:

.ui-autocomplete { 
    /* these sets the height and width */
    max-height:200px; 
    max-width: 236px; 

    /* these make it scroll for anything outside */
    overflow-x:scroll;
    overflow-y:scroll;
}

Если вы хотите изменить размер, просто измените размеры выше. Если вы хотите, чтобы ось х не прокручивалась, но оставляла у, то вы бы изменили ее на:

.ui-autocomplete { 
    /* same as above */
    max-height:200px; 
    max-width: 236px; 

    /* note that x is hidden now */
    overflow-x:hidden;
    overflow-y:scroll;
}  

Вы можете прочитать больше на сайте автозаполнения jQuery UI . Я связался с разделом «Результаты с прокруткой» справа, и вы можете нажать «Просмотреть источник», чтобы увидеть полный пример. Они отмечают, что IE не поддерживает максимальную высоту, поэтому вам придется установить только высоту для поддержки IE.

Answer 2

Если кто-то застрял с той же проблемой (хочет автозаполнение с вертикальной прокруткой), используйте это:

.ui-autocomplete 
{
  height: 200px;
  overflow-y: auto;
}