Як видалити / змінити текст помічника автозаповнення інтерфейсу JQuery?

Здається, це нова функція в 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 live, щоб повідомляти про те, коли результати стануть доступними, і про те, як переміщатися по списку пропозицій. Оголошення можна налаштувати за допомогою пункту повідомлень, який має два властивості: 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 створив проблему в першу чергу, і проблема буде вирішена на кілька рядків нижче в тому ж файлі. IMO це краще, ніж вирішення проблеми в окремому файлі CSS, який може редагуватися іншими людьми, які не знають, чому клас .ui-helper-hidden-доступ був змінений таким чином.

JQuery CSS .ui-helper-приховано-доступно знаходиться у файлі теми / base / core.css. Ви повинні включити цей файл (як мінімум) у свої таблиці стилів для подальшої сумісності.