Geek asks and answers

JQuery autocomplete style: parent text input style

Lots of jQuery autocomplete questions related to the (yow) style, but none of them want to "match the style of the parent input."

My background

I am a java / C ++ programmer who also had quite a lot of experience in JS ... inside the PDF. PDF uses a completely different object model from HTML, and I'm just starting to get used to it. I am brand new to jQuery.

I would like my JQUI autocomplete control style to match the appropriate input type. Border style, font, font size, etc.

Question

This is a form making application that doesn't really speak CSS (as far as users are concerned). Each field can have its own font and font size, background color, etc. Hopefully not, but Dammit Jim, I'm a programmer, not a graphic designer! Not my department.

In any case, this is software-generated HTML (runs in Java), so some things that can be simple in manual markup are out of the question, and some things that would still be impossible are pretty trivial.

Each input field has an identifier, so creating the right selector is very simple. What to do with this selector is part of the scratches on the head. Acquiring and analyzing a style attribute in a script at runtime is like "Too much work." There must be a better way.

Ideally, it would look something like this:

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

, ( firebug), -, UL "" . , . Grr.

, ?

: autocomplete() , . Grr.

Hrrm...

( ), , . , , UL.

kludgy, : div appendTo. " , -n-so". , ... , . DOM.

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

css , ... " ". , , jQuery, - .

+3
2

, , - .

  • "appendTo" , .
  • " UL.

, script :

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>. , , , , . Autocomplete .

, "#" + 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 );
  }
}
+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-, - ?

+2

More articles:


All Articles