2017-07-19 29 views
5

po naciśnięciu strzałki thro "wyników, jej wyświetlanie elementów html takich jak span, br, div. Czy jest praca nad stylem wyników bez dodawania zakresu, br, div do wyników.I jak mogę zapobiec wyświetlaniu wyników w polu wejściowym po naciśnięciu strzałki w dół. Tylko "Enter" z dispaly wyniki w polu wejściowymjquery ui autouzupełnianie multilinii stylizacji wyników

Mocowanie ekranu: enter image description here

+1

Czy próbowałeś umieszczenie innych linii w pseudoelement? – jhpratt

+2

Czy możesz dołączyć przykładowy znacznik i odpowiedni kod js? – karthick

Odpowiedz

2

Tutaj może to pomóc.

$(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

wyglądać oficjalna dokumentacja

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

można zastąpić wybierz i ostrość zdarzenie

focus: function(event, ui) { 
    $("#project").val(ui.item.label); 
    return false; 
}, 
select: function(event, ui) { 
    $("#project").val(ui.item.label); 
    ... 
    return false; 
} 

Aby wyświetlić pojedynczą właściwość obiektu lub niestandardowego formatu, #project to dane wejściowe, na podstawie których można zastosować wtyczkę autouzupełniania