Polymer + JQuery UI + Dart：自动完成无法正常工作答案

【问题标题】：Polymer + JQuery UI + Dart: Autocomplete doesn't work properlyPolymer + JQuery UI + Dart：自动完成无法正常工作
【发布时间】：2014-06-30 17:26:12
【问题描述】：

我遇到了以下令人烦恼的问题：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

入口页面：

从入口页面自动完成 - 工作不正确！

从入口页面自动完成 - 工作正常

另请参阅the source code of this example。

代码：

<!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();
}

【问题讨论】：

Polymer 引入了 shadowDOM，jQuery 不支持 shadowDOM。
我相信有一种解决方法可以解决这个问题。在聚合物 0.9.0 中，这段代码对我有用。
原生 js + 飞镖？对我来说从来都不是一个好主意 :) 我不会使用它。
你有什么想法吗？

标签： jquery jquery-ui dart polymer dart-polymer

【解决方案1】：

当您在聚合物中使用它时，元素位置的计算方式会有所不同。

jquery-ui.css 说：

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

这就是为什么它会处于错误的位置。 jQuery UI 将无法确定从实际主体到您的 DOM 元素的正确位置，因为 ShadowDOM 旨在隐藏这些信息。您必须自己计算正确的偏移量来定位它。

问候，罗伯特

【讨论】：

感谢这个有用的建议，但是更改 ui-autocomplete 样式的顶部和左侧没有效果..