JQuery自动完成：改变外观和感觉

Question

我一直是一个使用Java和Python的后端开发者。我曾经使用过JQuery进行验证、数据表格以及核心JavaScript任务等操作。我一直使用默认的JQuery CSS。

现在我被要求创建一个自动完成小部件，其外观和体验与LinkedIn的自动完成相似。结果应该分组到类别中，并且如果可能，在列表项的左侧显示图像。我不知道如何更改UI主题的CSS类来实现此目的。我的CSS经验非常有限。

任何指导都将不胜感激。

谢谢，

Sam

P.S. 根据第一个回答，我进行了以下编辑：

我已经使用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>

但是它是在哪里生成的？我该如何更改生成的内容？

- Sam Mohamed

---

你能创建一个 JSFiddle 吗？ - rana

Answer 1

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

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

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

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

希望你能有所进展！祝你好运 :)

- Yngve B-Nilsen

---

感谢您的评论。我认为问题更像是这样的。我已经在Firebug中查看了JQuery的自动完成结果，它们是：code<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Java</a></li>code那么这是从哪里生成的？我该如何更改生成的内容？ - Sam Mohamed

Answer 2

我在 JQuery 的 API 页面上搜索了 Autocomplete 插件，并发现有一些函数可以用来影响返回结果的布局，这些函数可以在 JQuery UI Autocomplete API Docs 中找到。

例如：

formatItem -->  Function    

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

我仍然需要解决如何使用它的细节，一旦我解决了，我会更新答案。

- Sam Mohamed