Come rimuovere / modificare il testo dell'helper di completamento automatico dell'interfaccia utente di JQuery?

Sembra che questa sia una nuova funzionalità in JQuery UI 1.9.0, perché ho usato JQuery UI molte volte prima e questo testo non è mai apparso.

Impossibile trovare nulla di correlato nella documentazione API.

Quindi utilizzando un esempio di completamento automatico di base con sorgente locale

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

Quando la ricerca corrisponde, mostra questo testo di supporto correlato:

"1 risultato è disponibile, utilizza i tasti freccia su e giù per navigare."

Come posso disabilitarlo in modo carino, non rimuovendolo con i selettori JQuery.

So che è stata data una risposta, ma volevo solo fornire un esempio di implementazione:

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

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

Questo è usato per l'accessibilità, un modo semplice per nasconderlo è con CSS:

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

Oppure (vedi il commento di Daniel sotto)

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

La risposta migliore qui ottiene l'effetto visivo desiderato, ma sconfigge l'oggetto di jQuery che ha il supporto ARIA ed è un po 'ostico per gli utenti che fanno affidamento su di esso! Coloro che hanno detto che jQuery CSS lo nasconde per te hanno ragione, e questo è lo stile che lo fa:

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

Copialo nel tuo foglio di stile invece di rimuovere il messaggio, per favore :).

Secondo questo blog :

Ora utilizziamo le regioni live di ARIA per annunciare quando i risultati saranno disponibili e come navigare nell'elenco dei suggerimenti. Gli annunci possono essere configurati tramite l'opzione messages, che ha due proprietà: noResults per quando non viene restituito alcun elemento e risultati per quando viene restituito almeno un elemento. In generale, è necessario modificare queste opzioni solo se si desidera che la stringa venga scritta in una lingua diversa. L'opzione dei messaggi è soggetta a modifiche nelle versioni future mentre lavoriamo su una soluzione completa per la manipolazione delle stringhe e l'internazionalizzazione in tutti i plugin. Se sei interessato all'opzione messaggi, ti invitiamo a leggere solo la fonte; il codice pertinente si trova in fondo al plug-in di completamento automatico ed è composto da poche righe.

...

Quindi come si applica al widget di completamento automatico? Bene, ora quando cerchi un elemento, se hai uno screen reader installato ti leggerà qualcosa come "1 risultato è disponibile, usa i tasti freccia su e giù per navigare". Piuttosto carino, eh?

Quindi se vai su GitHub e guardi il codice sorgente del completamento automatico , intorno alla riga 571 vedrai dove è effettivamente implementato.

L'aggiunta del css jquery ha anche funzionato per rimuovere il testo dell'istruzione.

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

Dato che è presente per motivi di accessibilità, è probabilmente meglio nasconderlo con CSS.

Tuttavia, suggerirei:

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

Piuttosto che:

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

Poiché il primo nasconderà l'elemento fuori dallo schermo, ma consentirà comunque ai lettori di schermo di leggerlo, mentre display:nonenon lo fa.

Bene, questa domanda è un po 'più vecchia, ma il testo non viene visualizzato affatto quando includi il file css corrispondente:

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

Ovviamente devi inserire un tema reale invece di, YOUR_THEME_HEREad esempio, "levigatezza"

Modellalo come il tema jQuery stesso lo definisce. Molte altre risposte suggeriscono di includere un intero foglio di stile, ma se vuoi solo il CSS pertinente, ecco come è fatto 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);
}

L'aggiunta di questo codice subito dopo il completamento automatico nel tuo script spingerà il fastidioso aiutante fuori dalla pagina, ma le persone che usano gli screen reader ne trarranno comunque vantaggio:

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

Non sono un fan della manipolazione dei CSS con JS ma in questo caso penso che abbia senso. Il codice JS ha creato il problema in primo luogo e il problema verrà risolto poche righe sotto nello stesso file. IMO questo è meglio che risolvere il problema in un file CSS separato che potrebbe essere modificato da altre persone che non sanno perché la classe .ui-helper-hidden-access è stata modificata in questo modo.

Il jQuery CSS .ui-helper-hidden-access si trova nel file themes / base / core.css. Dovresti includere questo file (come minimo) nei tuoi fogli di stile per compatibilità futura.