javascript - jQuery 自动完成样式 : match parent text input's style

Question

很多与样式相关的 jquery 自动完成问题 (yow)，但没有一个想要“匹配父输入的样式”。

我的背景

我是一名 java/c++ 程序员，在 JS 方面也有相当多的经验……在 PDF 中。 PDF 使用与 HTML 完全不同的对象模型，我才刚刚开始习惯它。我对 jQuery 还很陌生。

我希望我的 JQUI 自动完成控件的样式与相应输入的样式相匹配。边框样式、字体、字体大小等。

问题

这是一个不真正使用 CSS 的表单生成应用程序(就用户而言)。每个字段可能有自己的字体和字体大小、背景颜色等。我希望不会，但该死的吉姆，我是程序员而不是平面设计师!不是我的部门。

无论如何，这是以编程方式生成的 HTML(用 Java 完成)，因此一些在手动标记中可能很简单的事情是不可能的，而一些几乎不可能的事情是微不足道的.

每个输入字段都有一个 ID，因此创建正确的选择器很容易。如何处理该选择器是令人头疼的部分。在运行时获取和解析脚本中的样式属性似乎工作量太大。一定有更好的方法。

理想情况下，它会像这样:

var stylesToCopy = $("#fieldID").???;
$(???).magicallyApplyStyles(stylesToCopy);

查看由自动完成(在 Firebug 中)生成的标记，我没有看到 ID 或任何东西来将特定的 UL 标记为“附加”到给定的输入。而且我没有看到任何添加到输入中的内容以另一种方式附加它。咕噜咕噜

那么男人要做什么？

---

进一步调查:autocomplete() 返回选定的输入，而不是自动完成控件本身。咕噜咕噜

嗯……

---

每个输入可能有不同的样式(全部设置为内联)，所以我认为基于类的技术不会奏效。这也意味着我需要一个可以挑选出正确 UL 的选择器。

想法

有点笨拙，但它会起作用:为每个自动完成添加一个带有 ID 的 div 到正文，并将其用作 appendTo。然后选择器变成“ID such-n-so 的第一个 child ”。我不确定这将如何影响自动完成的定位......也许根本不会。它们已经位于 DOM 树不同深度的不同分支中。

$("#such-n-so:first-child").css(someAttr, someVal);

有了 css 和这个 li'l hack，我有了一个可行的理论……但它似乎“还有很长的路要走”。希望你们中的一位 jQuery 专家能给我一些更干净的东西。

Answer 1

您能做的最好的事情就是将一个类应用到您的自动完成字段，然后将相同的类应用到您的自动完成控件。

所以，例如，如果你有类似的东西:

<input type="text" id="fieldID" class="autocomplete" />
<div id="autocomplete-results"></div>

然后你的 jquery 可以这样做:

$("#autocomplete-results").attr('class', $("#fieldID").attr('class'));

当然你总是可以只修改你的 HTML 来拥有这个:

<div id="autocomplete-results" class="autocomplete"></div>

然后，在您的 CSS 中，您可以使用 .autocomplete 而不是使用 #fieldID 作为选择器

最后，如果您只想复制某些样式并且不想担心类等，您可以使用这样的东西:jQuery CSS plugin that returns computed style of element to pseudo clone that element?