Подтвердить что ты не робот

Jquery ui autocomplete добавляет пробел

Я использую автозаполнение jQuery в div, но я получаю этот дополнительный диапазон, автоматически добавленный jQuery

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

Как я могу предотвратить создание этого диапазона?

4b9b3361

Ответ 1

По причине доступности, слепые люди могут "читать", сколько результатов найти. Если вы действительно хотите удалить это, вы можете изменить исходный код:

this.liveRegion = $( "<span>", {
                role: "status",
                "aria-live": "polite"
            })
            .addClass( "ui-helper-hidden-accessible" )
            .insertAfter( this.element );

Но это не рекомендуется.

Ответ 2

У меня та же проблема. вот как я решил... добавить правило css:

.ui-helper-hidden-accessible { display:none; }

Ответ 3

Вы можете избавиться от него, добавив этот обработчик событий в свой автозаполнение:

$(element).autocomplete({
    ...
    create: function (e) {
        $(this).prev('.ui-helper-hidden-accessible').remove();
    }
});

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

Ответ 4

Я использовал фреймворк CSS для макета с селекторами nth-child, поэтому этот диапазон исказил мой макет столбца.

display: none или position: absolute; top: -999999 не решит мою проблему. Мне пришлось полностью удалить элемент из DOM, поэтому я написал следующий create event обработчик:

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}

Ответ 5

вам действительно не следует удалять это (вы хотите просмотреть веб-страницу, которая предназначена только для слепых, и вы не можете получить доступ к контенту?)...

нелегко сделать сайт ada совместимым. этот диапазон - всего лишь очень маленький кусочек всего этого.

скрытие элементов с дисплеем не так или иначе является плохой практикой в ​​отношении ada. почему страницы, подобные facebook, скрывают некоторые элементы, отступая их куда-то за пределами экрана:

display: none vs visibility: hidden vs text-indent: 9999 Как читатель экрана ведет себя с каждым?

для связанных с адой вещей, которые вы могли бы начать здесь: http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

может быть, чтобы заставить высоту 0 мог быть полезен в этом случае...

Ответ 6

Добавление файла .css для меня работало (и, конечно же, удалены все элементы span, но это не очень хорошее решение):

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

Ответ 7

Это будет работать отлично:

$(document).ready(function(){ $("span").remove(); });