title: jQuery Autocomplete style: match parent text input's style
body: <p><em>Lots of style-related jquery autocomplete questions (yow), but none that want to &quot;match the parent input's style&quot;.</em></p>
  <h3>My Background</h3>
  <p>I'm a java/c++ programmer that has also had quite a bit of experience in JS... within PDF.  PDF uses an entirely different object model from HTML, and I'm just starting to get used to it.  I'm Quite New to jQuery.</p>
  <p>I'd like my JQUI autocomplete control's style to match the corresponding input's style.  Border style, font, font size, and so on.</p>
  <h3>The Question</h3>
  <p>This is for a form generation app that doesn't really speak CSS (as far as the users are concerned).  Each field might have its own font &amp; font size, background color, and so forth.  I'd hope not, but Dammit Jim, I'm a programmer not a graphic designer!  Not my department.</p>
  <p>At any rate, this is programmatically generated HTML (done in Java), so some things that might be simple in hand-rolled markup are out of the question, and some things that would be all-but-impossible are fairly trivial.</p>
  <p>Each input field has an ID, so creating the right selector is easy.  What to do with that selector is the head-scratching part.  Acquiring and parsing the style attribute in script at run time seems like Way Too Much Work.  There's got to be a better way.</p>
  <p>Ideally, it'd go something like this:</p>
  <pre><code>var stylesToCopy = $(&quot;#fieldID&quot;).???;
  $(???).magicallyApplyStyles(stylesToCopy);
  </code></pre>
  <p>Looking at the markup generated by autocomplete (in firebug) I don't see an ID or anything to mark that particular UL as being &quot;attached&quot; to a given input.  And I don't see anything added to the input to attach it the other way.  Grr.</p>
  <p>So what's a guy to do?</p>
  <hr />
  <p>Further investigation: <code>autocomplete()</code> returns the selected input, not the autocomplete control itself.  Grr.</p>
  <p>Hrrm...</p>
  <hr />
  <p>Each input might have a different style (all set inline), so I don't think a class-based technique is going to work.  That also means I need a selector that can pick out the right UL.</p>
  <h3>idea</h3>
  <p>A bit kludgy, but it'd work:  Add a div with an ID to the body for each autocomplete, and use that as the <code>appendTo</code>.  The selector then becomes &quot;first kid of ID such-n-so&quot;.  I'm not sure how that will affect the autocomplete's positioning... maybe not at all.  They're already in separate branches at different depths in the DOM tree.</p>
  <pre><code>$(&quot;#such-n-so:first-child&quot;).css(someAttr, someVal);
  </code></pre>
  <p>with <code>css</code> and this li'l hack, I've got a working theory... but it seems like &quot;the long way around&quot;.  Hopefully one of you jQuery gurus can clue me in on something cleaner.</p>