JQuery AutoComplete - 設置額外數據的樣式（即描述）

Question

我正在使用JQuery庫的自動完成功能，並想知道如何才能CSS樣式的額外信息（描述）。

即我目前的結果輸入到輸入時是： 約翰·史密斯 www.johnsmith.com

我想使域名用較小的字體，斜體和顏色樣式。 我嘗試添加該CSS如圖所示例如在jquery.com：

#result-description { 
    margin: 0; 
    padding: 0; 
    font-style:italic; 
    font-size:3px !important; 
} 

，但沒有運氣！

有什麼建議嗎？

Answer 1

終於解決了！必須在自動完成的.append部分添加一個字體標籤（使用您的樣式）：

.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br><font class=\"description\">" + item.desc + "</font></a>") 
      .appendTo(ul); 
    }; 

Answer 2

你見過這個例子：http://jqueryui.com/demos/autocomplete/#custom-data？

它顯示了完美的如何做到這一點：

<style> 
    #project-label { 
     display: block; 
     font-weight: bold; 
     margin-bottom: 1em; 
    } 
    #project-icon { 
     float: left; 
     height: 32px; 
     width: 32px; 
    } 
    #project-description { 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
    <script> 
    $(function() { 
     var projects = [ 
      { 
       value: "jquery", 
       label: "jQuery", 
       desc: "the write less, do more, JavaScript library", 
       icon: "jquery_32x32.png" 
      }, 
      { 
       value: "jquery-ui", 
       label: "jQuery UI", 
       desc: "the official user interface library for jQuery", 
       icon: "jqueryui_32x32.png" 
      }, 
      { 
       value: "sizzlejs", 
       label: "Sizzle JS", 
       desc: "a pure-JavaScript CSS selector engine", 
       icon: "sizzlejs_32x32.png" 
      } 
     ]; 

     $("#project").autocomplete({ 
      minLength: 0, 
      source: projects, 
      focus: function(event, ui) { 
       $("#project").val(ui.item.label); 
       return false; 
      }, 
      select: function(event, ui) { 
       $("#project").val(ui.item.label); 
       $("#project-id").val(ui.item.value); 
       $("#project-description").html(ui.item.desc); 
       $("#project-icon").attr("src", "images/" + ui.item.icon); 

       return false; 
      } 
     }) 
     .data("autocomplete")._renderItem = function(ul, item) { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
       .appendTo(ul); 
     }; 
    }); 
    </script> 



<div class="demo"> 
    <div id="project-label">Select a project (type "j" for a start):</div> 
    <img id="project-icon" src="/demos/autocomplete/images/transparent_1x1.png" class="ui-state-default"//> 
    <input id="project"/> 
    <input type="hidden" id="project-id"/> 
    <p id="project-description"></p> 
</div><!-- End demo -->