Question

当我按下箭头时，按下＆＃39;结果，它显示了像span，br，div这样的html元素。是否有工作来设置结果的样式而不添加span，br，div到结果。或者如何在按下箭头时阻止输入字段中的结果显示。只有＆＃34;输入＆＃34;在显示输入字段中显示结果

附上截图：

Answer 1

查看官方文档

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

您可以覆盖选择和焦点事件

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自动完成多行结果样式

2 个答案: