Question

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

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

当然感谢任何指导。

感谢

萨姆

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>

但那产生的是哪里？我如何改变生成的内容？

Answer 1

我首先要使自动完成功能正常工作，然后禁用jquery UI CSS文件。这将导致自动完成对话框看起来完整s * it：）

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

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

至于LinkedIn自动填充功能，我建议您再次使用检查器或firebug检查网站上的样式，然后复制并检查它。

希望你开始吧！祝你好运：）

Answer 2

我一直在寻找JQuery的API页面上的Autocomplete插件，并且有一些函数可以用来实现返回结果的布局，可以在{{3}找到}

例如：

formatItem -->  Function

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

我仍然需要弄清楚如何使用它的细节，我会在做完后更新答案

JQuery自动完成：改变外观

2 个答案: