95

これは JQuery UI 1.9.0 の新機能のようです。これまで JQuery UI を何度も使用しており、このテキストが表示されなかったからです。

API ドキュメントに関連するものは見つかりませんでした。

したがって、ローカルソースで基本的なオートコンプリートの例を使用する

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

検索が一致すると、次の関連するヘルパー テキストが表示されます。

「1 件の結果が利用可能です。移動するには上下の矢印キーを使用してください。」

JQueryセレクターで削除するのではなく、どうすればうまく無効にできますか。

4

10 に答える 10

153

私はこれが理解されたことを知っていますが、実装例を示したいだけです：

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});
于 2012-10-26T17:23:32.493 に答える
89

これはアクセシビリティのために使用されます。これを非表示にする簡単な方法は、CSS を使用することです。

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

または（以下のダニエルのコメントを参照）

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
于 2012-11-13T14:15:53.997 に答える
24

ここでの一番の答えは、望ましい視覚効果を実現しますが、ARIA をサポートする jQuery のオブジェクトを打ち負かし、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;
}

メッセージを削除する代わりに、それをスタイルシートにコピーしてください:)。

于 2013-09-05T13:58:02.937 に答える
17

このブログによると：

現在、ARIA のライブ リージョンを使用して、結果がいつ利用可能になるか、および提案のリストをナビゲートする方法をアナウンスします。アナウンスは、メッセージ オプションを介して構成できます。このオプションには、アイテムが返されない場合の noResults と、少なくとも 1 つのアイテムが返された場合の結果の 2 つのプロパティがあります。通常、文字列を別の言語で記述したい場合にのみ、これらのオプションを変更する必要があります。すべてのプラグインでの文字列操作と国際化の完全なソリューションに取り組んでいる間、メッセージ オプションは将来のバージョンで変更される可能性があります。メッセージ オプションに興味がある場合は、ソースを読むことをお勧めします。関連するコードは、オートコンプリート プラグインの一番下にあり、数行しかありません。

...

では、これはオートコンプリート ウィジェットにどのように適用されるのでしょうか? さて、アイテムを検索すると、スクリーン リーダーがインストールされている場合、「1 件の結果が利用可能です。上下の矢印キーを使用してナビゲートしてください。」のような内容が読み上げられます。かっこいいでしょ？

したがって、github にアクセスしてオートコンプリート ソース コードを見ると、571 行目あたりで実際に実装されていることがわかります。

于 2012-10-22T15:19:24.140 に答える
12

jquery css を追加すると、説明テキストを削除することもできました。

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
于 2013-08-22T17:24:12.400 に答える
5

これはアクセシビリティ上の理由からそこにあるため、CSS で非表示にするのがおそらく最善です。

ただし、次のことをお勧めします。

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

それよりも：

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

前者はアイテムを画面外に非表示にしますが、スクリーン リーダーはそれを読むことができますが、そうではありdisplay:noneません。

于 2013-06-11T14:39:50.113 に答える
2

この質問は少し古いですが、対応する css ファイルを含めると、テキストはまったく表示されません。

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

もちろん、YOUR_THEME_HERE「滑らかさ」などの代わりに実際のテーマを挿入する必要があります

于 2013-08-02T18:03:31.370 に答える
1

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);
}
于 2015-03-06T09:14:59.820 に答える