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
5
A
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
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
Czy próbowałeś umieszczenie innych linii w pseudoelement? – jhpratt
Czy możesz dołączyć przykładowy znacznik i odpowiedni kod js? – karthick