Làm cách nào để hiển thị tùy chọn trống trong tự động điền jquery?

Question

Tôi đang sử dụng tính năng tự động hoàn thành với tính năng combobox nabled. Tôi muốn hiển thị một tùy chọn trống tuy nhiên bất cứ khi nào tôi đặt giá trị của lựa chọn ban đầu của tôi vào một chuỗi rỗng nó không được hiển thị trong combobox.

Mặt hàng hiện tại không chứa chiều cao.

Có thể có tùy chọn trống trên hộp tổ hợp tự động hoàn tất không?

Answer 1

Vì vậy, chúng tôi đã tìm ra giải pháp. Bạn cần làm việc với phương thức _renderItem.

input.data("autocomplete")._renderItem = function(ul, item) { 
    var listItem; 
    if (item.label == "<strong></strong>") { 
     listItem = $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a><br></a>") 
       .appendTo(ul); 
    } else { 
     listItem = $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.label + "</a>") 
       .appendTo(ul); 
    } 

    return listItem; 
}; 

Lưu ý rằng bạn phải có một mục chuỗi trống trong danh sách ban đầu để làm việc này.

Answer 2

tôi đã cùng một vấn đề, giải quyết nó như thế này:

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

Khi nhãn mục rỗng (item.label === '') Tôi chỉ cần thêm một liên kết có chứa một không gian nonbreaking ( ) thay vì các nhãn.

EDIT:

tôi nhận ra điều này có thể giới thiệu một lỗ hổng XSS. Đảm bảo bạn thoát khỏi nhãn mục nếu nó có thể chứa dữ liệu nhập của người dùng. Hoặc sử dụng một số chức năng thoát, ví dụ underscore.js's escape function:

"<a>" + _.escape(item.label) + "</a>" 

hoặc xây dựng các yếu tố neo sử dụng jQuery như thế này:

$('<a/>').text(item.label) 

Answer 3

Hai giải pháp được đăng ở đây không làm việc cho tôi. _renderItem thậm chí không được gọi cho các tùy chọn trống.

Đây là những gì đã hiệu quả đối với tôi: Tôi đã thực hiện một chỉnh sửa rất nhỏ đối với hàm ánh xạ Chọn các tùy chọn cho các mục tự động hoàn thành.

response(select.children("option").map(function() { 
var text = $(this).text(); 
if (/*this.value && */(!request.term || matcher.test(text))) 
    return { 
     label: text.replace(
      new RegExp(
       "(?![^&;]+;)(?!<[^<>]*)(" + 
       $.ui.autocomplete.escapeRegex(request.term) + 
       ")(?![^<>]*>)(?![^&;]+;)", "gi" 
      ), "<strong>$1</strong>"), 
     value: text, 
     option: this 
    }; 
})); 

Tất cả những gì tôi đã làm là nhận xét một phần của điều kiện.

/*this.value && */ 

Sau đó, tôi đã thêm vào biểu định kiểu của tôi quy tắc cho các mục tự động hoàn thành.

.ui-autocomplete .ui-menu-item a 
{ 
    min-height: 15px; 
} 

Answer 4

$("#ctrl").autocomplete({ 
    source: [ "\u00A0", "One", "Two" ] 
}); 

Answer 5

Tôi có vấn đề này thời gian gần đây và trong khi các giải pháp khác là chủ yếu đúng tôi thấy đã có một bước mất tích.

if (this.value && (!request.term || matcher.test(text))) 

cần phải được thay đổi để

if (!request.term || matcher.test(text)) 

nếu không sẽ không có mặt hàng có sản phẩm nào trong nguồn.

Như với các giải pháp khác, thay đổi _renderItem để

input.data('autocomplete')._renderItem = function(ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append(item.label === '<strong></strong>' ? '<a>&nbsp;</a>' : '<a>' + item.label + '</a>') 
      .appendTo(ul); 
     }  

Đây là một kết hợp của giải pháp BentOnCoding và Tim Buthe của