Jak usunąć / zmienić tekst pomocnika autouzupełniania interfejsu użytkownika JQuery?

Wygląda na to, że jest to nowa funkcja w JQuery UI 1.9.0, ponieważ wcześniej korzystałem z JQuery UI i ten tekst nigdy się nie pojawił.

Nie udało się znaleźć niczego związanego w dokumentacji API.

A więc używając podstawowego przykładu autouzupełniania z lokalnym źródłem

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

Gdy wyszukiwanie pasuje, wyświetla następujący tekst pomocnika:

„Dostępny jest 1 wynik, do nawigacji użyj klawiszy strzałek w górę i w dół”.

Jak mogę to wyłączyć w przyjemny sposób, nie usuwając go za pomocą selektorów JQuery.

Wiem, że otrzymałem odpowiedź, ale chciałem tylko podać przykład implementacji:

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

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

Jest to używane do ułatwień dostępu, łatwy sposób na ukrycie tego za pomocą CSS:

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

Lub (zobacz komentarz Daniela poniżej)

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

Najlepsza odpowiedź tutaj daje pożądany efekt wizualny, ale pokonuje obiekt jQuery obsługujący ARIA i jest trochę chujowa dla użytkowników, którzy na niej polegają! Ci, którzy wspomnieli, że jQuery CSS ukrywa to za Ciebie, mają rację, a oto styl, który to robi:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Skopiuj to do swojego arkusza stylów zamiast usuwać wiadomość, proszę :).

Według tego bloga :

Teraz używamy aktywnych regionów ARIA do ogłaszania, kiedy wyniki będą dostępne i jak poruszać się po liście sugestii. Ogłoszenia można skonfigurować za pomocą opcji wiadomości, która ma dwie właściwości: noResults, gdy nie są zwracane żadne elementy i wyniki, gdy zwracany jest co najmniej jeden element. Ogólnie rzecz biorąc, musisz zmienić te opcje tylko wtedy, gdy chcesz, aby łańcuch był napisany w innym języku. Opcja wiadomości może ulec zmianie w przyszłych wersjach, podczas gdy pracujemy nad pełnym rozwiązaniem do manipulacji ciągami znaków i internacjonalizacji we wszystkich wtyczkach. Jeśli interesuje Cię opcja wiadomości, zachęcamy do przeczytania źródła; odpowiedni kod znajduje się na samym dole wtyczki autouzupełniania i składa się tylko z kilku wierszy.

...

Jak to się ma do widżetu autouzupełniania? Cóż, teraz, gdy szukasz elementu, jeśli masz zainstalowany czytnik ekranu, odczyta on coś w rodzaju „Dostępny jest 1 wynik, do nawigacji użyj klawiszy strzałek w górę iw dół”. Całkiem fajnie, co?

Więc jeśli przejdziesz do github i spojrzysz na autouzupełniany kod źródłowy , około linii 571 zobaczysz, gdzie jest to faktycznie zaimplementowane.

Dodanie jquery css pomogło również usunąć tekst instruktażowy.

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

Ponieważ jest to tam ze względu na dostępność, prawdopodobnie najlepiej jest to ukryć za pomocą CSS.

Sugerowałbym jednak:

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

Zamiast:

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

Ponieważ pierwszy ukryje element poza ekranem, ale nadal umożliwia czytnikom ekranu jego odczytanie, podczas display:nonegdy nie.

Cóż, to pytanie jest nieco starsze, ale tekst w ogóle się nie pojawia po dołączeniu odpowiedniego pliku css:

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

Oczywiście musisz wstawić rzeczywisty motyw zamiast YOUR_THEME_HEREnp. „Gładkości”

Nadaj mu styl, jak sam motyw jQuery. Wiele innych odpowiedzi sugeruje włączenie całego arkusza stylów, ale jeśli potrzebujesz tylko odpowiedniego arkusza CSS, tak to się robi w 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);
}

Dodanie tego kodu zaraz po autouzupełnianiu w skrypcie wypchnie irytującego pomocnika ze strony, ale osoby korzystające z czytników ekranu nadal będą z tego korzystać:

$(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
});

Nie jestem fanem manipulowania CSS za pomocą JS, ale w tym przypadku myślę, że ma to sens. Kod JS stworzył problem w pierwszej kolejności, a problem zostanie rozwiązany kilka wierszy poniżej w tym samym pliku. IMO jest to lepsze niż rozwiązanie problemu w oddzielnym pliku CSS, który może być edytowany przez inne osoby, które nie wiedzą, dlaczego klasa .ui-helper-hidden-access została zmodyfikowana w ten sposób.

JQuery CSS .ui-helper-hidden-access znajduje się w pliku themes / base / core.css. Powinieneś dołączyć ten plik (przynajmniej) do swoich arkuszy stylów, aby zachować zgodność z przyszłymi wersjami.