Sử dụng HTML trong tự động hoàn thành giao diện người dùng jQuery

Trước jQuery UI 1.8.4, tôi có thể sử dụng HTML trong mảng JSON mà tôi đã tạo để hoạt động với tính năng tự động hoàn thành.

Tôi đã có thể làm điều gì đó như:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

Điều đó sẽ hiển thị dưới dạng văn bản màu đỏ trong trình đơn thả xuống.

Kể từ 1.8.4 mà không hoạt động. Tôi đã tìm thấy http://dev.jqueryui.com/ticket/5275 yêu cầu tôi sử dụng ví dụ HTML tùy chỉnh ở đây mà tôi không gặp may.

Làm cách nào tôi có thể bắt đầu để HTML hiển thị trong đề xuất?

JQuery của tôi là:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

Mảng JSON của tôi bao gồm HTML như sau:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Thêm cái này vào mã của bạn:

).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

Vì vậy, mã của bạn trở thành:

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

Lưu ý: Trên các phiên bản cũ của jQueryUI, sử dụng .data("autocomplete")"thay vì.data("ui-autocomplete")

Điều này cũng được ghi lại trong tài liệu jquery-ui autocomplete tại: http://api.jqueryui.com/autocomplete/#option-source

Bí quyết là:

1. Sử dụng tiện ích mở rộng giao diện người dùng jQuery này
2. Sau đó, trong tùy chọn tự động hoàn thành vượt qua autocomplete({ html:true});
3. Bây giờ bạn có thể chuyển html <div>sample</div>vào trường "nhãn" của đầu ra JSON để tự động hoàn thành.

Nếu bạn không biết cách thêm plugin vào giao diện người dùng JQuery thì hãy:

1. Lưu plugin (phần mở rộng html của Scott González) trong tệp js hoặc tải xuống tệp js.
2. Bạn đã thêm tập lệnh tự động hoàn thành jquery-ui vào trang html của mình (hoặc tệp jquery-ui js). Thêm tập lệnh plugin này sau tệp javascript tự động hoàn thành đó.

Giải pháp này không được khuyến nghị nhưng bạn chỉ có thể chỉnh sửa tệp nguồn jquery.ui.autocomplete.js (v1.10.4)

Nguyên:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Đã sửa:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Tôi đã gặp vấn đề tương tự, nhưng tôi thích sử dụng một mảng tùy chọn tĩnh cho tùy chọn của mình ('nguồn') để có hiệu suất. Nếu bạn đã thử với giải pháp này, bạn sẽ thấy rằng jQuery cũng tìm kiếm trên toàn bộ nhãn.

EG nếu bạn cung cấp:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Sau đó, nhập "span" sẽ khớp với cả hai kết quả, để tìm kiếm trên giá trị chỉ ghi đè $.ui.autocomplete.filterhàm:

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

Bạn có thể chỉnh sửa tham số cuối cùng c.valuethành bất kỳ thứ gì bạn muốn, ví dụ như c.id || c.label || c.valuecho phép bạn tìm kiếm trên nhãn, giá trị hoặc id.

Bạn có thể cung cấp bao nhiêu khóa / giá trị cho thông số nguồn của tự động hoàn thành tùy thích.

PS: thông số ban đầu là c.label||c.value||c.

Tôi đã có vấn đề được đề cập bởi Clarence. Tôi cần cung cấp HTML để tạo ra một giao diện đẹp với các kiểu và hình ảnh. Điều này dẫn đến việc nhập "div" khớp với tất cả các phần tử.

Tuy nhiên, giá trị của tôi chỉ là một số ID, vì vậy tôi không thể cho phép tìm kiếm chỉ thực hiện điều đó. Tôi cần tìm kiếm để tìm một số giá trị, không chỉ số ID.

Giải pháp của tôi là thêm một trường mới chỉ chứa các giá trị tìm kiếm và kiểm tra điều đó trong tệp jQuery UI. Đây là những gì tôi đã làm:

(Đây là trên giao diện người dùng jQuery 1.9.2; nó có thể giống với những người khác.)

Chỉnh sửa chức năng bộ lọc trên dòng 6008:

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

Tôi đã thêm séc cho trường "value.searchonly". Nếu nó ở đó, nó chỉ sử dụng trường đó. Nếu nó không có ở đó, nó hoạt động như bình thường.

Sau đó, bạn sử dụng tự động hoàn thành chính xác như trước đây, ngoại trừ bạn có thể thêm khóa "searchhonly" vào đối tượng JSON của mình.

Tôi hy vọng rằng sẽ giúp một ai đó!