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

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

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; }

Или (см. комментарий Daniel'a ниже)

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

Верхний ответ здесь достигает желаемого визуального эффекта, но побеждает объект jQuery с поддержкой Ария, и немного глупыми, чтобы пользователи, которые полагаются на него! Те, кто'вэ отметил, что 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 live regions для объявления о том, когда результаты станут доступны... и как перемещаться по списку предложений. Объявления могут быть настроены через опцию messages, которая имеет два свойства: noResults для случаев, когда не возвращается ни один элемент, и results для случаев, когда возвращается хотя бы &gt. один элемент возвращается. В общем, вам нужно будет изменить эти параметры только в том случае. опции, если вы хотите, чтобы строка была записана на другом языке. Опция messages может быть изменена в будущих версиях, пока мы &gt. работаем над полным решением для манипулирования строками и интернационализации во всех плагинах. Если вы заинтересованы в опция сообщений, мы рекомендуем вам просто прочитать исходный текст; > соответствующий код находится > на сайте. соответствующий код находится в самом низу плагина автозаполнения и составляет &gt. всего несколько строк.

...

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

Если вы зайдете на github и посмотрите на исходный код autocomplete source code, в районе строки 571 вы увидите, где это действительно реализовано.

Добавляем jQuery CSS также работал, чтобы удалить текст инструкции.

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

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

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

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

А не:

.ui-helper-hidden-accessible { 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, это как это's выполнено в 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-файл, который может быть отредактирован другими людьми, которые Дон'т знаю, почему .пользовательский интерфейс-помощник-скрытые-доступного класса был изменен таким образом.

С jQuery и CSS .пользовательский интерфейс-помощник-скрытые-можно есть в темах/базы/ядра.CSS-файл. Вы должны включить этот файл (как минимум) в ваши таблицы стилей и для обеспечения совместимости.