Question

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

我的背景

我是一名java / c ++程序员，在PDF中也有相当多的JS经验。 PDF使用完全不同的HTML对象模型，我才开始习惯它。我是jQuery的新手。

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

问题

这是一个表单生成应用程序，它并不真正说CSS（就用户而言）。每个字段可能都有自己的字体＆amp;字体大小，背景颜色等。我希望不是，但Dammit Jim，我是一名程序员而不是平面设计师！不是我的部门。

无论如何，这是以编程方式生成的HTML（在Java中完成），因此一些可能在手工标记中简单的事情是不可能的，而一些完全不可能的事情是相当微不足道的。

每个输入字段都有一个ID，因此创建正确的选择器很容易。如何处理选择器是头疼的部分。在运行时获取和解析脚本中的style属性看起来像Way Too Much Work。必须有更好的方法。

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

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

查看自动完成生成的标记（在firebug中）我没有看到ID或任何标记该特定UL作为“附加”到给定输入的内容。我没有看到任何添加到输入的东西以另一种方式附加它。 GRR。

那么一个人要做什么？

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

Hrrm ......

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

主意

有点麻烦，但它确实有效：为每个自动填充功能添加一个带ID的div到身体，并将其用作appendTo。选择器然后成为“这样一个ID的第一个孩子”。我不确定这将如何影响自动完成的定位...也许根本不会。它们已经位于DOM树中不同深度的不同分支中。

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

与css和这个黑客，我有一个有效的理论......但它似乎“很长的路要走”。希望你们中的一个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中，不使用#fieldID作为选择器，而是使用.autocomplete

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

Answer 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 );
  }
}

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

尽管如此，将选择器更改为"#" + 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 );
  }
}

jQuery自动完成样式：匹配父文本输入的样式

我的背景

问题

主意

2 个答案: