JQuery 自动完成 : changing look and feel

Question

我一直是一名使用 Java 和 Python 的后端开发人员。我将 JQuery 用于诸如验证、数据表和核心 javascript 任务之类的事情。我一直使用 Jquery 的默认 CSS。

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

当然感谢任何指导。

谢谢

山姆

附注根据第一个答案，我将其编辑如下:

我已经使用 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 文件。这将使自动完成对话框看起来完整 s*it :)

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

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

关于LinkedIn的自动补全，我建议你再用inspector或者firebug检查网站的style，复制检查就可以了。

希望你有一个开始!祝你好运:)