Как я могу самостоятельно настроить положение и ширину предложений в автозаполнении Jquery ui?

Question

Я новичок в jquery ui autocomplete !

Я обнаружил, что всплывающее предложение width точно так же, как поле ввода , которое связано с плагином autocomplete , но мое содержание в предложениях может быть длиннеечем ширина окна всплывающего списка предложений.Очевидно, что ширина и положение вычислялись с помощью плагина для автозаполнения , так есть ли способ установить ширину всплывающих подсказок для автоматического соответствия ширине моего содержимого?

спасибовы очень ~~ !!

Answer 1

Я знаю, что мой вариант не тот, который вы хотите, но я устал искать решение моей ситуации, которое так близко к вашему, и, наконец, я его получил.Так что, может быть, мое решение может кому-то помочь.

Все, что я хотел, это установить ширину списка предложений, равную ширине поля ввода .У нас есть идентификатор для этого?Да ... если список предложений является статическим, у нас есть статический идентификатор, такой как # ui-id-1, но если мы динамически добавили список - будет сгенерирован идентификатор, такой как # ui-id-4598 ...

Я не нашел, где и как был создан такой динамический идентификатор, поэтому у меня есть небольшое решение jQuery:

$('.ui-combobox-input').bind('click autocompleteopen', function(){
    var elementWidth = $(this).closest('.ui-combobox').css('width');
    //set suggestion list width
    $('ul.ui-autocomplete:visible').css({"width": elementWidth});
});

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

Answer 2

Попробуйте подключиться к событию open, предоставляемому виджетом автозаполнения. Там вы можете получить ссылку на div, содержащий предложения и установить его ширину.

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

$( "#tags" ).bind( "autocompleteopen", function(event, ui) {
    var $suggestionsDiv = $(event.target).autocomplete('widget');
    $suggestionsDiv.css('width', 'auto'); // may not work cross browser
});

Как отмечено в комментариях, это может быть не на 100% кросс-браузерной совместимостью (у меня часто возникают проблемы с IE в отношении width: auto, особенно динамически после загрузки страницы), но вы поймете, что идея.