khi tôi nhấn mũi tên xuống 'kết quả', nó hiển thị các phần tử html như span, br, div. Có một công việc xung quanh để phong cách kết quả với ra thêm khoảng, br, div cho kết quả. Hoặc làm thế nào tôi có thể ngăn chặn kết quả hiển thị trong lĩnh vực đầu vào khi nhấn xuống mũi tên. Chỉ phím "Enter" với dispaly kết quả trong lĩnh vực đầu vàojquery ui autocomplete kết quả multiline tạo kiểu
5
A
Trả lời
2
Tại đây điều này có thể hữu ích.
$(function() {
var doctors = [{
label: "Dr Daniel Pound",
department: "Family Medicine, Medicine, Obesity",
address: "3575 Geary Blvd Fl San Francisco CA"
}, {
label: "Dr Daniel Test",
department: "Pediatrics, Pediatric Hematology",
address: "1825 4th St Fl San Francisco CA"
}, {
label: "Dr Daniel Another",
department: "Orthopedics",
address: "1825 4th St Fl San Francisco CA"
}];
$("#doctor").autocomplete({
minLength: 2,
source: doctors,
select: function(event, ui) {
$("#doctor").val(ui.item.label);
return false;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li class='each'>")
.append("<div class='acItem'><span class='name'>" +
item.label + "</span><br><span class='desc'>" +
item.department + "</span><br><span class='desc'>" +
item.address + "</span></div>")
.appendTo(ul);
};
});
.each{
border-bottom: 1px solid #555;
padding: 3px 0;
}
.acItem .name{
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.acItem .desc{
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color:#555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<body>
<h1>Hello AutoComplete</h1>
<input id="doctor" type="text" />
</body>
6
Nhìn tài liệu oficial
Bạn có thể ghi đè lên các lựa chọn và tập trung sự kiện
focus: function(event, ui) {
$("#project").val(ui.item.label);
return false;
},
select: function(event, ui) {
$("#project").val(ui.item.label);
...
return false;
}
Để hiển thị một thuộc tính duy nhất của đối tượng hoặc định dạng tùy chỉnh, #project là đầu vào mà bạn áp dụng plugin tự động hoàn thành
Các vấn đề liên quan
- 1. jQuery ui autocomplete - renderItem
- 2. jquery ui-autocomplete và google chrome autocomplete
- 3. jquery autocomplete - tùy chỉnh html cho kết quả niêm yết
- 4. Bind jQuery UI autocomplete sử dụng .live()
- 5. combobox jquery ui autocomplete với các loại
- 6. jQuery UI autocomplete, hiển thị một cái gì đó khi không có kết quả
- 7. Chọn kết quả UI jquery đầu tiên tự động
- 8. Phạm vi kết quả cho rails3 plugin jquery autocomplete
- 9. jQuery AutoComplete (jQuery UI 1.8rc3) với dịch vụ web ASP.NET
- 10. jquery-ui-autocomplete - Ghi đè _renderMenu và _renderItem
- 11. cách đặt id trong sự kiện nguồn jquery ui autocomplete
- 12. jQueryUI Autocomplete với kết quả có thể click
- 13. ajaxStart hủy bỏ jQuery Autocomplete
- 14. JQuery autocomplete - Chọn mục đầu tiên
- 15. Jquery AutoComplete và Gmail AutoComplete
- 16. kiểu trình đơn thả xuống jquery-ui
- 17. jquery-ui autocomplete: set nguồn bởi hàm callback không làm việc
- 18. jQuery UI AutoComplete: Chỉ cho phép đã chọn giá trị từ danh sách gợi ý
- 19. jquery autocomplete được chọn văn bản mục
- 20. Giới hạn kết quả trong jQuery Tự động hoàn thành
- 21. Tích hợp hình ảnh với jQuery AutoComplete
- 22. Cách tạo kiểu văn bản gần đây kết quả
- 23. jQuery: Yahoo Autocomplete/Autosuggest
- 24. jQuery UI Autocomplete sử dụng một tệp json tĩnh như nguồn
- 25. jquery ui autocomplete: chỉ kích hoạt khi mục không được chọn
- 26. Vấn đề cuộn jQuery-autocomplete
- 27. Jquery UI autocomplete và thẻ plugin (XOXCO) hợp nhất vấn đề
- 28. Có nhiều tiện ích jQuery Autocomplete không?
- 29. Kết nối Facebook, jQuery UI và jQuery.noConflict()
- 30. jQuery UI Autocomplete .result không phải là một tai ương chức năng
Các bạn đã thử đặt các dòng khác trong một pseudoelement? – jhpratt
bạn có thể bao gồm đánh dấu mẫu và mã js có liên quan không? – karthick