2017-07-19 17 views
5

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

Gắn ảnh chụp màn hình: enter image description here

+1

Các bạn đã thử đặt các dòng khác trong một pseudoelement? – jhpratt

+2

bạn có thể bao gồm đánh dấu mẫu và mã js có liên quan không? – karthick

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

http://jqueryui.com/autocomplete/#custom-data

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