Как удалить / изменить текст JQuery UI Autocomplete Helper?

91

Кажется, что это новая функция в JQuery UI 1.9.0, потому что я использовал JQuery UI много раз раньше, и этот текст никогда не появлялся.

Не удалось найти что-либо, связанное с документацией API.

Итак, используя базовый пример автозаполнения с локальным источником

$( "#find-subj" ).autocomplete({
    source: availableTags
});

Когда поиск совпадает с ним, этот связанный вспомогательный текст:

'1 доступен, используйте клавиши со стрелками вверх и вниз для навигации.'

Как я могу отключить его красивым способом, а не удалять его с помощью селекторов JQuery.

  • 1
    в каком браузере вы видите это? Можете ли вы увидеть тот же диалог на веб-сайте JQuery UI
  • 2
    Я никогда не видел этого, можете ли вы предоставить Fiddler или какой-то дополнительный код, чтобы мы могли рассмотреть его подробнее?
Показать ещё 2 комментария
Теги:
autocomplete

10 ответов

133
Лучший ответ

Я знаю, что это было сделано, но просто хотел привести пример реализации:

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
  • 4
    Я попробовал это, и он помещает строку «ноль» в том же месте. Решение состоит в том, чтобы изменить на: noResults: '', и вы вообще не получите никакого сообщения.
  • 2
    Работал для меня с noResults: ''. Интересно, почему это не задокументировано на api.jqueryui.com?
Показать ещё 6 комментариев
68

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

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

Или (см. ниже пояснение к Daniel)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
  • 3
    этот метод работал для меня. Спасибо
  • 5
    Как вы сказали, он используется для доступности, чтобы люди с программами чтения с экрана могли лучше понимать виджет. При использовании дисплея: нет; Вы также скрываете это от программ чтения с экрана. Лучше сдвинуть экран с позиции: absolte; Слева направо: -999em;
Показать ещё 1 комментарий
19

Верхний ответ здесь дает желаемый визуальный эффект, но побеждает объект 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;
}

Скопируйте это в таблицу стилей вместо удаления сообщения, пожалуйста:).

16

Согласно этот блог:

Теперь мы используем живые регионы ARIA, чтобы объявить о появлении результатов и как перемещаться по списку предложений. Объявления можно настроить с помощью опции сообщений, которая имеет два свойства: noResults для тех случаев, когда элементы не возвращаются и результаты, когда, по крайней мере, один элемент возвращается. В общем, вам нужно будет только изменить эти если вы хотите, чтобы строка была написана на другом языке. Опция сообщений может быть изменена в будущих версиях, в то время как мы работать над полным решением для манипулирования строками и интернационализация всех плагинов. Если вас интересует сообщения, мы рекомендуем вам просто прочитать источник; соответствующий код находится в самом низу плагина автозаполнения и всего несколько строк.

...

Итак, как это относится к виджету автозаполнения? Ну, теперь, когда вы поиск элемента, если у вас установлено устройство для чтения с экрана, оно будет читать вам что-то вроде "1 результат доступен, используйте клавиши со стрелками вверх и вниз для навигации". Довольно круто, да?

Итак, если вы перейдете в github и посмотрите исходный код автозаполнения, то по строке 571 вы увидите, где это фактически реализовано.

8

Добавление jquery css также помогло удалить учебный текст.

<link
 rel="stylesheet"
 href="/jquery-ui.css" />
  • 0
    У меня тоже сработало.
3

Так как это доступно по причинам доступности, лучше всего скрыть его с помощью CSS.

Однако я бы предложил:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

Вместо

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

Как первый будет скрывать элемент за кадром, но все же позволяет считывателям экрана читать его, а display:none - нет.

2

Ну, этот вопрос немного старше, но текст не отображается вообще, когда вы включаете соответствующий файл css:

<link
 rel="stylesheet"
 href="/jquery-ui.css" />

Конечно, вам нужно вставить фактическую тему вместо YOUR_THEME_HERE, например. "Гладкость"

1

Добавление этого кода сразу после автозаполнения в 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 был изменен таким образом.

  • 1
    Я искал вечно, пытаясь решить эту проблему, и ваше решение сработало.
0

JQuery CSS.ui-helper-hidden-available находится в файле themes/base/core.css. Вы должны включить этот файл (как минимум) в свои таблицы стилей для прямой совместимости.

0

Создайте стиль, как сама тема jQuery. Многие другие ответы включают в себя целую таблицу стилей, но если вы просто хотите получить соответствующий CSS, вот как это делается в /jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню