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

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

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

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

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

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

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

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

Программирование
autocomplete javascript jquery jquery-ui
22-го октября 2012 в 12:07
29 просмотров
Комментарии к вопросу (4)
Решение

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

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});
2pha
Редактировал ответ 1-го октября 2019 в 6:25
Комментарии (7)

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

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

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

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
Bertrand
Редактировал ответ 27-го февраля 2014 в 4:34
Комментарии (3)

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

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

Комментарии (1)

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

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

...

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

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

Pavel V.
Редактировал ответ 18-го марта 2016 в 9:56
Комментарии (0)

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

Комментарии (1)

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

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

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

А не:

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

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

Комментарии (1)

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

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

Комментарии (0)

Стиль его, как сама тема 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);
}
Комментарии (0)

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

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

Комментарии (2)

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

Комментарии (0)