jQuery Autocomplete 样式：匹配父文本输入的样式答案

【问题标题】：jQuery Autocomplete style: match parent text input's stylejQuery Autocomplete 样式：匹配父文本输入的样式
【发布时间】：2011-06-15 21:24:27
【问题描述】：

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

我的背景

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

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

问题

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

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

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

理想情况下，它会是这样的：

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

查看自动完成（在萤火虫中）生成的标记，我没有看到 ID 或任何东西来将该特定 UL 标记为“附加”到给定输入。而且我没有看到任何添加到输入的内容以另一种方式附加。呸。

那么男人该怎么办？

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

嗯……

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

想法

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

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

有了css 和这个 li'l hack，我有一个可行的理论......但它似乎是“很长的路要走”。希望你们中的一位 jQuery 大师可以为我提供一些更清洁的东西。

【问题讨论】：

标签： javascript jquery css jquery-ui-autocomplete

【解决方案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 中，不要使用 #fieldID 作为选择器，而是使用 .autocomplete

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

【讨论】：

添加类并不是一个真正的选择。对于页面上的 N 个自动完成功能中的每一个，样式可能需要不同。这仍然没有回答如何真正掌握自动完成的 UL，以便我可以使用它的风格。
等等，你希望我真正阅读你的整个问题吗？不可能的。您使用的是哪个自动完成插件？
但是 jQuery CSS 插件听起来像是朝着正确的方向迈出了一步。感谢您的链接。
与 jqueryUI 一起发布的内置插件

【解决方案2】：

所以我认为这样的事情会奏效。

在创建自动完成时使用“appendTo”，以便我们可以通过选择器找到它。
"对于此样式属性列表，从输入字段中获取样式，并将其设置到自动完成 UL 中。

所以脚本看起来像：

function addAutoComplete(inputID) {
  var wrapperDiv = document.createElement( "div" );
  var wrapperID = inputID + "__wrapper";
  wrapperDiv.setAttribute( "id", wrapperID );

  var inputSelector = $( "#"+inputID );
  var autoCompSelector = $("#" + wrapperID + ":first-child" );

  inputSelector.autoComplete( {..., appendTo: wrapperID} );

  var attrs = ["font-size", "font-family", "color", "background-color", "border", ...];
  for (var curAttrIdx = 0; curAttrIdx < attrs.length; ++curAttrIdx) {
    var attrVal = inputSelector.css( attrs[ curAttrIdx ] );
    autoCompleteSelector.css( attrs[ curAttrIdx ], attrVal );
  }
}

关闭但没有雪茄。 <ul> 下的每个<li> 都有一个样式类，<ul> 中的<a> 也是如此。只是为了让生活更精彩，选择链接的选择器似乎很脆弱。版本之间自动完成工作方式的微小变化很容易破坏选择器。

不过，将选择器更改为 "#" + wrapperID + ":first-child li a" 将适用于当前版本的 jQueryUI（我写这篇文章时为 1.8.13）。

经过几个小时的实验，我想出了一些可行的方法。最后。列表项（和链接）在autocompleteopen 事件之前不存在，所以我在那里设置了样式。像这样：

inputSelector.autocomplete( {source: ["foo", "bar"],
  position: { my : "top", at: "bottom"},
  minLength:minChars,
  appendTo: "#" + wrapperID,
  open: function (event, ui) {
    autoCompApplyEntryStyles(inputID);
  }
});

function autoCompApplyEntryStyles(inputID) {
  var inputSelector = $( "#"+inputID );
  var wrapperID = inputID + "__wrapper";
  var autocompSelector = $("#" + wrapperID + " ul li a");

  if (autocompSelector.size() == 0) {
    return;
  }
  var attrs = ["font-size", "font-family", "font-weight", "font-style", "color", "background-color", "text-align", "text-decoration"];

  for (var curAttrIdx = 0; curAttrIdx < attrs.length; ++curAttrIdx) {
    var attrVal = inputSelector.css( attrs[ curAttrIdx ] );
    autocompSelector.css( attrs[ curAttrIdx ], attrVal );
  }
}

【讨论】：