jquery ui 自动完成多行结果样式

Question

当我在结果中按下向下箭头时，它会显示 html 元素，例如 span、br、div。是否有一种方法可以在不将 span、br、div 添加到 results.Or 的情况下设置结果的样式，我怎样才能防止在按下向下箭头时在输入字段中显示结果。只有 "Enter" 键才能在输入字段中显示结果

附上截图：

Answer 1

看官方文档

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

您可以覆盖 select 和焦点事件

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

要显示单个属性对象或自定义格式，#project 是您应用自动完成插件的输入

Answer 2

这可能对您有所帮助。

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

jquery ui 自动完成多行结果样式

jquery ui autocomplete multiline results styling

jquery

jquery-ui-autocomplete