All geek questions in one place

Jquery ui autocomplete multiline results

when I click the down arrow, the results displaying html elements like span, br, div. Is there any work to create the results with span, br, div added to the results. Or how to prevent the display of results in the input field when you click the down arrow. Only the "Enter" key with the results displayed in the input field

Attaching a screenshot: enter image description here

+4
source share
2 answers

This may help here.

 $(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>
Run codeHide result
+2
source

See the official documentation

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

You can override the pick and focus event.

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

, # - ,

+5

Source: https://habr.com/ru/post/1681811/

More articles:


All Articles