JQuery自动完成:改变外观

Question

我一直是Java和Python的后端开发人员.我已经将JQuery用于验证,数据表和核心javascript任务.我总是使用Jquery的默认CSS.

我现在的任务是创建一个自动完成小部件,其外观和感觉就像LinkedIn的自动完成一样.在某种意义上,结果应该分组,如果可能的话,图像将显示在列表项的左侧.我不知道如何更改UI主题的CSS类来执行此操作.我的CSS经验充其量只是最小的.

任何指导肯定是赞赏.

谢谢

山姆

ps根据第一个答案,我正在编辑如下:

我已经使用firebug看到自动完成结果被创建为:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 114px; left: 55px; display: block; width: 176px;">
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Java</a></li>
    <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">JavaScript</a></li></ul>

但那产生了什么？我该如何改变生成的内容？

Answer 1

我首先让自动完成功能正常工作，然后禁用 jquery UI CSS 文件。这将导致自动完成对话框看起来很完整:)

现在慢慢开始实现您在 Chrome、IE 或 FF 中的 Firebug 中使用检查器看到的样式。

如果您遇到困难，您可以随时从原始 jQueryUI CSS 中查找样式并将其复制到样式表文件中，然后编辑设置。这肯定会帮助您更好地学习 CSS，而且您还将获得自动完成功能的正确外观和感觉。

至于 LinkedIn 自动完成，我建议您再次使用检查器或萤火虫检查网站上的样式，然后复制并检查它。

希望你有一个开始！祝你好运 ：）