Question

我正在使用JQuery库的自动完成功能，想知道我如何用CSS样式添加额外的信息（描述）。

即。输入输入时我当前的结果是：约翰·史密斯 www.johnsmith.com

我想让域名以较小的字体，斜体和颜色设置样式。我尝试添加这个CSS，如jquery.com上的示例所示：

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

但没有运气！

有什么建议吗？

Answer 1

您是否见过这个例子：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 -->

Answer 2

终于解决了！必须在自动填充的.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 );
    };

JQuery AutoComplete - 为额外数据设置样式（即描述）

2 个答案: