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; }또는 (아래 Daniel의 의견 참조)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }답변
여기에서 최고의 대답은 원하는 시각적 효과를 얻지 만 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;
}메시지를 제거하는 대신 스타일 시트에 복사하십시오. :).
답변
이 블로그 에 따르면 :
이제 ARIA 라이브 지역을 사용하여 결과를 사용할 수있는시기와 제안 목록을 탐색하는 방법을 발표합니다. 알림은 두 가지 속성이있는 메시지 옵션을 통해 구성 할 수 있습니다. 항목이 반환되지 않은 경우에 대한 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“부드러움” 대신 실제 테마를 삽입해야합니다.
