JQuery 自动完成：改变外观答案

【问题标题】：JQuery Autocomplete: changing look and feelJQuery 自动完成：改变外观
【发布时间】：2011-11-16 11:36:58
【问题描述】：

我一直是 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>

但是那是在哪里生成的呢？以及如何更改生成的内容？

【问题讨论】：

你能创建jsfiddle吗？

标签： jquery css jquery-ui user-interface

【解决方案1】：

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

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

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

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

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

【讨论】：

感谢您的评论。我认为这个问题更像这样。我在 firebug 中查看了 JQuery 的自动完成结果，它们是：code
- Java

【解决方案2】：

我一直在 JQuery 的 API 页面上搜索 Autocomplete 插件，有一些函数可以用来影响返回结果的布局，可以在JQuery UI Autocomplete API Docs找到/p>

例如：

formatItem -->  Function

默认值：假设单行包含单个值。为项目提供高级标记。对于每一行结果，都会调用这个函数。返回值将显示在结果列表中的 LI 元素内。 Autocompleter 将提供 4 个参数：结果行、行在结果列表中的位置（从 1 开始）、结果列表中的项目数和搜索词。

我还得弄清楚如何使用它的细节，一旦我会更新答案

【讨论】：