JQuery UI 자동완성 도우미 텍스트를 제거/변경하는 방법은 무엇입니까?

JQuery UI 자동완성 도우미 텍스트를 제거/변경하는 방법은 무엇입니까?

JQuery UI 1.9.0의 새로운 기능인 것 같습니다. 예전에 JQuery UI를 많이 사용했는데 이 텍스트가 뜨지 않았기 때문입니다.

API 설명서와 관련된 내용을 찾을 수 없습니다.

로컬 소스에서 기본 자동 완성 예제를 사용합니다.

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

검색이 일치하면 다음과 같은 관련 도우미 텍스트가 표시됩니다.

'1개의 결과를 확인할 수 있습니다. 위쪽과 아래쪽 화살표 키를 사용하여 탐색하십시오.'

JQuery Selector로 제거하지 않고 어떻게 하면 좋은 방법으로 비활성화할 수 있습니까?

이에 대한 답변이 나왔다는 것은 알지만 구현 예를 들어 보고자 했을 뿐입니다.

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; }

또는(아래 다니엘의 코멘트 참조)

.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 for no items another returned when another returned items and returned when the one items another returned items.일반적으로 문자열을 다른 언어로 쓰려면 이 옵션만 변경하면 됩니다.메시지 옵션은 모든 플러그인에서 문자열 조작 및 국제화를 위한 전체 솔루션을 작업하는 동안 향후 버전에서 변경될 수 있습니다.메시지 옵션에 관심이 있는 경우 소스를 읽는 것이 좋습니다. 관련 코드는 자동 완성 플러그인의 맨 아래에 있으며 몇 줄에 불과합니다.

...

그러면 자동 완성 위젯에는 어떻게 적용됩니까?이제 항목을 검색할 때 화면 판독기가 설치되어 있으면 "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_HEREh함어, 함"

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

jQuery CSS.ui-helper-hidden-accessible은 테마/base/core.css 파일에 있습니다.순방향 호환성을 위해 스타일시트에 이 파일을 최소한 포함해야 합니다.

스크립트에서 자동 완료 직후에 이 코드를 추가하면 성가신 도우미가 페이지에서 제외되지만 화면 판독기를 사용하는 사용자는 여전히 이 코드를 사용할 수 있습니다.

$(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 파일로 문제를 해결하는 것보다 낫습니다.

언급URL : https://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text