Стиль автозаполнения jQuery: соответствует стилю ввода родительского текста - PullRequest
Новая
       5

Стиль автозаполнения jQuery: соответствует стилю ввода родительского текста

3 голосов
/ 16 июня 2011

Множество связанных с стилем вопросов автозаполнения jquery (yow), но ни одного, которые хотят "соответствовать стилю родительского ввода".

Мой фон

Я программист на Java / C ++, у которого также есть довольно большой опыт работы с JS ... в PDF. PDF использует совершенно другую объектную модель, чем HTML, и я только начинаю к ней привыкать. Я совсем новичок в jQuery.

Мне бы хотелось, чтобы стиль элемента управления автозаполнения JQUI соответствовал стилю соответствующего ввода. Стиль рамки, шрифт, размер шрифта и т. Д.

Вопрос

Это приложение для генерации форм, которое на самом деле не говорит на CSS (насколько это касается пользователей). Каждое поле может иметь свой собственный шрифт и размер шрифта, цвет фона и так далее. Я надеюсь, что нет, но, черт возьми, Джим, я программист, а не графический дизайнер! Не мой отдел.

Во всяком случае, это программно сгенерированный HTML (выполненный на Java), поэтому о некоторых вещах, которые могут быть простыми в ручной разметке, не может быть и речи, а некоторые вещи, которые почти невозможны, довольно тривиальны .

Каждое поле ввода имеет идентификатор, поэтому создать правильный селектор очень просто. Что делать с этим селектором? Получение и анализ атрибута style в скрипте во время выполнения выглядит как Way Too Much Work. Должен быть лучший способ.

В идеале это было бы примерно так: 

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

Глядя на разметку, генерируемую автозаполнением (в firebug), я не вижу идентификатора или чего-либо, что помечает этот конкретный UL как «прикрепленный» к данному входу. И я не вижу ничего добавленного к входу, чтобы прикрепить его другим способом. Grr.

Так что же делать парню?

Дальнейшее исследование: autocomplete() возвращает выбранный вход, а не сам элемент управления автозаполнением. Grr.

Хмм ...

Каждый ввод может иметь свой стиль (все встроенные), поэтому я не думаю, что методика на основе классов будет работать. Это также означает, что мне нужен селектор, который может выбрать правильный UL.

Идея

Немного глупо, но это сработает: добавьте div с идентификатором в тело для каждого автозаполнения и используйте его как appendTo. Селектор тогда становится "первым ребенком идентификатора такого-н-так". Я не уверен, как это повлияет на позиционирование автозаполнения ... может быть, совсем нет. Они уже находятся в разных ветвях на разных глубинах в дереве DOM. 

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

с css и этот хак, у меня есть рабочая теория ... но это похоже на "долгий путь". Надеюсь, один из вас, гуру JQuery, может подсказать мне что-нибудь более чистое.

Ответы [ 2 ]

2 голосов
/ 16 июня 2011

Лучшее, что вы можете сделать, это применить класс к полю автозаполнения, а затем применить тот же класс к элементу управления автозаполнением.

Так, например, если у вас есть что-то вроде: 

<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 плагин, который возвращает вычисленный стиль элемента для псевдоклонирования этого элемента?

1 голос
/ 16 июня 2011

Так что я думаю, что-то вроде этого будет работать.

  1. Используйте «appendTo» при создании автозаполнения, чтобы мы могли найти его с помощью селектора.
  2. «Для этого списка стилейатрибутов, получите стиль из поля ввода и установите его в 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 );
  }
}
...