Как удалить / изменить jQuery UI автозаполнения вспомогательный текст?

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

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

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

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

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

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

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

92
autocomplete javascript jquery jquery-ui

10 ответов

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
148

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

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

или (см. комментарий Даниэля ниже)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
76

верхний ответ здесь достигает желаемого визуального эффекта, но побеждает объект jQuery, имеющий поддержку ARIA, и немного диковат для пользователей, которые полагаются на него! Те, кто упомянул, что jQuery CSS скрывает это для вас, правы, и это стиль, который делает это:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

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

19

по данным этот блог:

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

...

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

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

16

добавление jQuery css также работало для удаления учебного текста.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
10

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

тем не менее, я бы предложил:

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

вместо:

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

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

4

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

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

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

2

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

$(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-accessible.

1

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

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

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

0