Polymer + JQuery UI + Dart: автозаполнение не работает должным образом

Я столкнулся со следующей неприятной проблемой: пример кода из http://jqueryui.com/autocomplete/ не работает должным образом, когда он используется внутри полимерного элемента. Я ожидаю, что раскрывающийся список будет отображаться внизу элемента ввода, но он отображается вверху страницы. Автозаполнение отлично работает на странице входа, как и ожидалось. Пожалуйста, смотрите код ниже. Что не так в моем коде полимерного элемента? Могу ли я использовать JQuery UI вместе с Dart Polymer? Можете ли вы предложить мне какой-либо обходной путь, чтобы использовать полимер и автозаполнение JQuery? Я использую последнюю версию dart, библиотеку dart-polymer и JQuery UI.

Dart Editor version 1.5.1.release (STABLE)
Dart SDK version 1.5.1
Dart-Polymer version 0.11.0+5
JQuery UI version 1.11.0

Страница входа:

страница

Автозаполнение со страницы входа - работает некорректно!

Автозаполнение из полимерного элемента!

Автозаполнение со страницы входа - работает нормально

Автозаполнение со страницы входа

См. также исходный код этого пример.

Код:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>

    <!-- import the click-counter -->
    <link rel="import" href="autocomplete.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>

    <!-- JQuery UI -->
    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
      $(function() {
      var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
      ];
      $( "#tags" ).autocomplete({
      source: availableTags
      });
      });
  </script>     
  </head>
  <body>
    <h1>Autocomplete JQuery UI Autocomplete issue!</h1>

    <p>Polymer Element version of Autocomplete</p>
    <div>
      <cc-autocomplete count="5"></cc-autocomplete>
    </div>

    <br />

    <p>Entry Page version of Autocomplete</p>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>

  </body>
</html>

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="cc-autocomplete">   
  <template>
    <link rel="stylesheet" href="jquery-ui.css">

    <!-- JQuery Autocomplete in the polymer element -->
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
  </template>

  <script>
    Polymer('cc-autocomplete', {
      ready: function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        $(this.$.tags).autocomplete({
          source: availableTags
        });
      }
     });
  </script>    
  <script type="application/dart" src="autocomplete.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

@CustomTag('cc_autocomplete')
class MyAutocomplete extends PolymerElement {
  MyAutocomplete.created() : super.created();
}

dart jquery polymer jquery-ui dart-polymer
person Roman    schedule 30.06.2014    source источник
comment
Polymer представляет shadowDOM, а jQuery не поддерживает shadowDOM.   -  person Günter Zöchbauer    schedule 30.06.2014
comment
Я считаю, что есть обходной путь для решения этой проблемы. В полимере 0.9.0 этот код работал у меня..   -  person Roman    schedule 30.06.2014
comment
родной js + дартс? никогда не была хорошей идеей для меня :) Я бы не стал ее использовать.   -  person Robert    schedule 01.07.2014
comment
Есть ли у вас какие-либо идеи?   -  person Roman    schedule 01.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы используете его в полимерном элементе, позиции будут рассчитываться по-разному.

jquery-ui.css говорит:

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

Вот почему он будет в неправильном положении. Пользовательский интерфейс jQuery не сможет определить правильное положение от фактического тела до вашего элемента DOM, поскольку ShadowDOM предназначен для сокрытия этой информации. Вам придется позиционировать его самостоятельно, вычислив правильные смещения самостоятельно.

С уважением, Роберт

person Robert    schedule 01.07.2014
comment
Спасибо за это полезное предложение, но изменение верхней и левой части стиля ui-autocomplete не имеет никакого эффекта. - person Roman; 01.07.2014