Как удалить / изменить текст помощника автозаполнения JQuery UI?

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

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

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

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

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

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

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

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

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

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

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

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

Или (см. Комментарий Даниила ниже)

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

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

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

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

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

...

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

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

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

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/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="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

Конечно, вам нужно вставить актуальную тему вместо, YOUR_THEME_HEREнапример, «гладкости».

Оформите его так, как сама тема 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);
}

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

$(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 создал проблему в первую очередь, и проблема будет решена несколькими строками ниже в том же файле. ИМО, это лучше, чем решение проблемы в отдельном файле CSS, который может редактироваться другими людьми, которые не знают, почему класс .ui-helper-hidden-available был изменен таким образом.

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