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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

...

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

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

Ответ 5

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

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

Ответ 6

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

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

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

Вместо

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

Создайте стиль, как сама тема 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);
}

Ответ 10

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