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

当我按下箭头thro结果时，它显示html元素，如span，br，div。是否有一种方法可以在结果中添加span，br，div来减少结果的风格。或者，如何在按下箭头时防止在输入字段中显示结果。只有 “Enter” 键与dispaly在输入字段jquery ui自动完成多行结果样式

结果附加截图：

来源

2017-07-19 dragonfly

您是否尝试过将另一线非pseudoelement？ – jhpratt

您能否包含样本标记和相关的js代码？ – karthick

这里可能有所帮助。

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

来源

2017-07-25 07:11:06 ibubi

看的公报文件

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是您应用自动填充插件的输入

来源

2017-07-24 21:03:07

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

回答

相关问题