Làm cách nào để xóa / thay đổi văn bản Trình trợ giúp tự động hoàn thành giao diện người dùng JQuery?

Có vẻ như đây là một tính năng mới trong JQuery UI 1.9.0, bởi vì tôi đã sử dụng JQuery UI rất nhiều lần trước đây và văn bản này không bao giờ xuất hiện.

Không thể tìm thấy bất kỳ thứ gì liên quan trên tài liệu API.

Vì vậy, sử dụng một ví dụ cơ bản về tự động hoàn thành với nguồn cục bộ

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

Khi tìm kiếm khớp, nó sẽ hiển thị văn bản trợ giúp có liên quan này:

'Hiện có 1 kết quả, sử dụng phím mũi tên lên và xuống để điều hướng.'

Làm cách nào để tôi có thể vô hiệu hóa nó theo cách hay, không phải bằng cách xóa nó bằng các bộ chọn JQuery.

Tôi biết điều này đã được cập nhật nhưng chỉ muốn đưa ra một ví dụ triển khai:

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

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

Điều này được sử dụng cho khả năng truy cập, một cách dễ dàng để ẩn nó là với CSS:

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

Hoặc (xem phần bình luận của Daniel bên dưới)

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

Câu trả lời hàng đầu ở đây đạt được hiệu ứng hình ảnh mong muốn, nhưng đánh bại đối tượng jQuery có hỗ trợ ARIA và hơi khó chịu đối với những người dùng dựa vào nó! Những người đã đề cập rằng CSS jQuery ẩn điều này cho bạn là chính xác và đây là phong cách thực hiện điều đó:

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

Vui lòng sao chép nó vào biểu định kiểu của bạn thay vì xóa thông báo :).

Theo blog này :

Giờ đây, chúng tôi sử dụng các khu vực trực tiếp của ARIA để thông báo khi có kết quả và cách điều hướng qua danh sách đề xuất. Các thông báo có thể được cấu hình thông qua tùy chọn tin nhắn, có hai thuộc tính: noResults cho khi không có mục nào được trả lại và kết quả cho khi ít nhất một mục được trả lại. Nói chung, bạn chỉ cần thay đổi các tùy chọn này nếu bạn muốn chuỗi được viết bằng một ngôn ngữ khác. Tùy chọn thông báo có thể thay đổi trong các phiên bản tương lai trong khi chúng tôi làm việc trên một giải pháp đầy đủ để thao tác chuỗi và quốc tế hóa trên tất cả các plugin. Nếu bạn quan tâm đến tùy chọn tin nhắn, chúng tôi khuyến khích bạn chỉ cần đọc nguồn; mã liên quan nằm ở cuối plugin tự động hoàn thành và chỉ có một vài dòng.

...

Vậy điều này áp dụng cho tiện ích con tự động hoàn thành như thế nào? Vâng, bây giờ khi bạn tìm kiếm một mục, nếu bạn đã cài đặt trình đọc màn hình, nó sẽ đọc cho bạn thông tin như “Đã có 1 kết quả, hãy sử dụng các phím mũi tên lên và xuống để điều hướng.”. Khá tuyệt phải không?

Vì vậy, nếu bạn truy cập github và xem mã nguồn tự động hoàn thành , xung quanh dòng 571, bạn sẽ thấy nơi điều này thực sự được triển khai.

Thêm jquery css cũng có tác dụng xóa văn bản hướng dẫn.

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

Vì điều này ở trong đó vì lý do trợ năng, có lẽ tốt nhất bạn nên ẩn nó bằng CSS.

Tuy nhiên, tôi sẽ đề nghị:

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

Thay vì:

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

Như trước đây sẽ ẩn mục đó ngoài màn hình, nhưng vẫn cho phép trình đọc màn hình đọc nó, trong khi display:nonethì không.

Chà, câu hỏi này hơi cũ hơn một chút, nhưng văn bản hoàn toàn không hiển thị khi bạn bao gồm tệp theo css:

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

Tất nhiên bạn phải chèn một chủ đề thực tế thay vì YOUR_THEME_HERE"độ mịn"

Tạo kiểu cho nó như cách chủ đề jQuery tự tạo kiểu cho nó. Rất nhiều câu trả lời khác đề xuất bao gồm toàn bộ biểu định kiểu, nhưng nếu bạn chỉ muốn CSS có liên quan, đây là cách nó được thực hiện trong 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);
}

Thêm mã này ngay sau khi tự động hoàn thành trong tập lệnh của bạn sẽ đẩy trình trợ giúp khó chịu ra khỏi trang, nhưng những người sử dụng trình đọc màn hình sẽ vẫn được hưởng lợi từ nó:

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

Tôi không phải là người thích thao tác CSS với JS nhưng trong trường hợp này, tôi nghĩ nó có lý. Mã JS đã tạo ra vấn đề ngay từ đầu và vấn đề sẽ được giải quyết một vài dòng bên dưới trong cùng một tệp. IMO điều này tốt hơn là giải quyết vấn đề trong một tệp CSS riêng biệt có thể được chỉnh sửa bởi những người khác không biết tại sao lớp .ui-helper-hidden-access lại được sửa đổi theo cách đó.

JQuery CSS .ui-helper-hidden-access nằm trong tệp themes / base / core.css. Bạn nên bao gồm tệp này (tối thiểu) trong các bảng định kiểu của mình để tương thích về sau.