Кажется, что это новая функция в JQuery UI 1.9.0, потому что я использовал JQuery UI много раз раньше, и этот текст никогда не появлялся.
Не удалось найти что-либо, связанное с документацией API.
Итак, используя базовый пример автозаполнения с локальным источником
$( "#find-subj" ).autocomplete({
source: availableTags
});
Когда поиск совпадает с ним, этот связанный вспомогательный текст:
'1 доступен, используйте клавиши со стрелками вверх и вниз для навигации.'
Как я могу отключить его красивым способом, а не удалять его с помощью селекторов JQuery.
Я знаю, что это было сделано, но просто хотел привести пример реализации:
$("#find-subj").autocomplete({
source: availableTags,
messages: {
noResults: '',
results: function() {}
}
});
Это используется для доступности, простой способ скрыть его с помощью CSS:
.ui-helper-hidden-accessible { display:none; }
Или (см. ниже пояснение к Daniel)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
Верхний ответ здесь дает желаемый визуальный эффект, но побеждает объект jQuery, поддерживающий ARIA, и немного хулиган для пользователей, которые полагаются на него! Те, кто упомянул о том, что CSS jQuery скрывает это, вы правы, и это стиль, который делает это:
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Скопируйте это в таблицу стилей вместо удаления сообщения, пожалуйста:).
Согласно этот блог:
Теперь мы используем живые регионы ARIA, чтобы объявить о появлении результатов и как перемещаться по списку предложений. Объявления можно настроить с помощью опции сообщений, которая имеет два свойства: noResults для тех случаев, когда элементы не возвращаются и результаты, когда, по крайней мере, один элемент возвращается. В общем, вам нужно будет только изменить эти если вы хотите, чтобы строка была написана на другом языке. Опция сообщений может быть изменена в будущих версиях, в то время как мы работать над полным решением для манипулирования строками и интернационализация всех плагинов. Если вас интересует сообщения, мы рекомендуем вам просто прочитать источник; соответствующий код находится в самом низу плагина автозаполнения и всего несколько строк.
...
Итак, как это относится к виджету автозаполнения? Ну, теперь, когда вы поиск элемента, если у вас установлено устройство для чтения с экрана, оно будет читать вам что-то вроде "1 результат доступен, используйте клавиши со стрелками вверх и вниз для навигации". Довольно круто, да?
Итак, если вы перейдете в github и посмотрите исходный код автозаполнения, то по строке 571 вы увидите, где это фактически реализовано.
Добавление jquery css также помогло удалить учебный текст.
<link
rel="stylesheet"
href="/jquery-ui.css" />
Так как это доступно по причинам доступности, лучше всего скрыть его с помощью CSS.
Однако я бы предложил:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
Вместо
.ui-helper-hidden-accessible { display:none; }
Как первый будет скрывать элемент за кадром, но все же позволяет считывателям экрана читать его, а display:none
- нет.
Ну, этот вопрос немного старше, но текст не отображается вообще, когда вы включаете соответствующий файл css:
<link
rel="stylesheet"
href="/jquery-ui.css" />
Конечно, вам нужно вставить фактическую тему вместо YOUR_THEME_HERE
, например. "Гладкость"
Добавление этого кода сразу после автозаполнения в script приведет к раздражающему помощнику со страницы, но люди, использующие программы чтения с экрана, по-прежнему получат от него выгоду:
$(document).ready(function() { //pushing the autocomplete helper out of the visible page
$(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});
Я не поклонник манипуляции CSS с JS, но в этом случае я думаю, что это имеет смысл. Код JS создал проблему в первую очередь, и проблема будет решена несколькими строками ниже в том же файле. IMO это лучше, чем решение проблемы в отдельном файле CSS, который может быть отредактирован другими людьми, которые не знают, почему класс с поддержкой .ui-helper-hidden был изменен таким образом.
JQuery CSS.ui-helper-hidden-available находится в файле themes/base/core.css. Вы должны включить этот файл (как минимум) в свои таблицы стилей для прямой совместимости.
Создайте стиль, как сама тема jQuery. Многие другие ответы включают в себя целую таблицу стилей, но если вы просто хотите получить соответствующий CSS, вот как это делается в /jquery-ui.css
:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}