jQuery UI - Autcomplete - динамически устанавливается на основе содержимого - PullRequest
Новая
       4

jQuery UI - Autcomplete - динамически устанавливается на основе содержимого

1 голос
/ 04 июня 2011

Есть ли способ динамической установки ширины объекта автозаполнения в зависимости от длины возвращаемого ему текста?

Спасибо

Ответы [ 2 ]

1 голос
/ 02 июля 2012

В CSS убедитесь, что ширина установлена ​​на auto: 

.ui-autocomplete {
    height: 250px;
    max-height: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    width:auto;
}

Когда виджет с автозаполнением создает элементы списка, установите для стиля пробела li значение nowrap: 

input.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li style='white-space:nowrap;'></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
};
1 голос
/ 04 июня 2011

Это заняло немного усилий, но я считаю, что у меня есть разумное решение. В первую очередь это требует привязки к событию «open» виджета автозаполнения, чтобы изменить поведение меню по умолчанию при его отображении, а также изменить несколько атрибутов CSS, чтобы выручить нас.

Метод поставляется с одним предупреждением: это приведет к тому, что фоновые полосы будут охватывать только длину текста, а не весь путь по меню в IE7. Он будет нормально работать в IE8 +, а также во всех других основных браузерах. Я бы не рекомендовал вам воспринимать это как проблему, так как вы бы приспособили свое решение к визуальному дисбалансу менее чем для 3% рынка и, возможно, даже меньше фактического количества зрителей.

CSS 

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

.ui-autocomplete .ui-menu-item a {
    padding-right: 20px;
}

Добавьте эти стили в свой проект, чтобы помочь с визуальным отображением. Стили .ui-autocomplete довольно стандартны для создания прокручиваемого списка пунктов меню, и вы, вероятно, уже используете его. Правый отступ, примененный к привязке, должен обеспечить достаточное количество места для полосы прокрутки в браузерах Firefox и Webkit. Это работает лучше, чем применение его непосредственно к контейнеру UL.

JQuery 

$(".myAutoComplete").autocomplete({
    ...
    open: function(e, ui) {
        $("ul.ui-autocomplete:visible").css("width", "").find("a").html(function(i, html) {
            return html.replace(/\s/g, "&nbsp;");
        });
    }
    ...
});

Обработчик, связанный с событием open, в основном очевиден в том, что он делает. Во-первых, используемый им селектор ищет единственное видимое меню автозаполнения. К счастью, событие открытия возникает только после того, как меню автозаполнения было показано. Это поможет вашему обработчику обратить внимание, если у вас есть более одного виджета автозаполнения на странице. Оттуда он удаляет атрибут "width", который применяется непосредственно к CSS неупорядоченного списка. Затем он находит всех потомков якоря в списке и выполняет глобальную замену всего пробела в своем HTML неразрывными пробелами. Nbsp заставляет якорь отвечать, увеличивая его ширину, а не перенося текст на новую строку, увеличивая тем самым ширину всего меню.

Вы можете увидеть рабочую демонстрацию здесь . Я бы предложил ввести «ab», а затем «deep», чтобы увидеть различия в изменении размера по мере их появления. Извините за длинный список цветов ( sorce ) в коде, но я хотел дать вам возможность получить хороший набор возможных предложений для просмотра различий в изменении размера.

EDIT

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

.ui-autocomplete .ui-menu-item a {
    white-space: nowrap;
}
...