web-dev-qa-db-ja.com

JQuery UI Autocomplete Helperテキストを削除/変更する方法は？

これはJQuery UI 1.9.0の新機能であるようです。これは、以前にJQuery UIを何度も使用し、このテキストが表示されなかったためです。

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

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

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

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

「1つの結果が利用可能です。上下矢印キーを使用してナビゲートします。」

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

javascriptjqueryjquery-uiautocomplete
93
user1236048

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
149
TK123

これはアクセシビリティのために使用され、CSSを使用して簡単に非表示にできます。

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

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

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

ここでの一番の答えは、望ましい視覚効果を達成しますが、ARIAをサポートする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;
}

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

22
Mike Campbell

このブログ によると：

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

...

では、これはオートコンプリートウィジェットにどのように適用されますか？さて、アイテムを検索すると、スクリーンリーダーがインストールされている場合、「1つの結果が利用できます。上下の矢印キーを使用して移動します。」かなりクールだよね？

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

17
j08691

Jquery cssを追加しても、説明テキストが削除されました。

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

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

しかし、私はお勧めします：

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

のではなく：

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

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

4
Neil Sayers

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

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

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

2
Markus W Mahlberg

スクリプト内のオートコンプリートの直後にこのコードを追加すると、迷惑なヘルパーがページから押し出されますが、スクリーンリーダーを使用しているユーザーは引き続きこのメリットを享受できます。

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

私はJSでCSSを操作するのは好きではありませんが、この場合は理にかなっていると思います。 JSコードが最初に問題を作成しました。同じファイルで数行下の問題が解決されます。 IMOこれは、.ui-helper-hidden-accessibleクラスがそのように変更された理由がわからない他の人が編集する可能性がある別のCSSファイルで問題を解決するよりも優れています。

1
Bruno 82

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);
}
0
dKen

JQuery CSS .ui-helper-hidden-accessibleはthemes/base/core.cssファイルにあります。前方互換性のために、このファイルを（少なくとも）スタイルシートに含める必要があります。

0
paulz